vue项目纯前端实现的模板打印功能示例代码

哥已不在是当年的歌

1. 下载一个插件 npm i vue-print-nb --save
   
2. 在main中引入 import Print from “vue-print-nb”
   
3.                            Vue.use(Print);
   
4. 在postcss.config.js里面展示这个数据样式，如果你的项目中没有这个文件
   
5.    那就下载一个插件"npm i postcss-px-to-view --save-dev";

复制代码

1. module.exports = {
   
2.   plugins: {
   
3.     autoprefixer: {},
   
4.     "postcss-px-to-viewport": {
   
5.       viewportWidth: 1920, //  视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸
   
6.       // viewportHeight: 1344, // 视窗的高度，移动端一般指定1334，也可以不配置
   
7.       unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
   
8.       viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw
   
9.       selectorBlackList: ['.nocalssvw'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
   
10.       exclude: [/printPersone/],
    
11.       // propList:["*", "!font-size"],//能转化为vw的属性列表
    
12.       minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
    
13.       mediaQuery: false // 允许在媒体查询中转换`px`
    
14.     }
    
15.   }
    
16. };

复制代码

1. 创建一个和“selectorBlackList”里面名字一样的vue，如上：printPersone.vue

复制代码

1. 父组件   
   
2. <template>
   
3.     <div>
   
4.         <el-dialog title="表" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
   
5.             <el-button type="primary" plain style="margin-bottom:5px;" @click="handlePrint">打印</el-button>
   
6.             <el-row>
   
7.                 <el-col :span="12">
   
8.                     <div>
   
9.                         <table border="1" class="tableOne" v-for="(item, index) in dataList" :key="index">
   
10.                             <thead>
    
11.                                 <tr>
    
12.                                     <th>姓名</th>
    
13.                                     <td>张三</td>
    
14.                                     <th>性别</th>
    
15.                                     <td>男</td>
    
16.                                     <th>出生年月</th>
    
17.                                     <td>1985.5.10</td>
    
18.                                     <td rowspan="4" style="width: 130px;"></td>
    
19.                                 </tr>
    
20.                                 <tr>
    
21.                                     <th>民族</th>
    
22.                                     <td>汉</td>
    
23.                                     <th>籍贯</th>
    
24.                                     <td>汉</td>
    
25.                                     <th>出生地</th>
    
26.                                     <td>山东</td>
    
27.                                 </tr>
    
28.                             </thead>
    
29.                         </table>
    
30. 
    
31.                     </div>
    
32.                 </el-col>
    
33.             </el-row>
    
34.             <!-- 引用那个打印的模板 -->
    
35.             <print-person ref="myPrintPerson" :list="dataList" />
    
36. 
    
37.         </el-dialog>
    
38.     </div>
    
39. </template>
    
40.   
    
41. <script>
    
42. import PrintPerson from './components/printPersone.vue'
    
43. export default {
    
44.     components: {
    
45.         PrintPerson,
    
46.     },
    
47.     data() {
    
48.         return {
    
49.             dialogVisible: false,
    
50.             dataList: [],
    
51.         };
    
52.     },
    
53.     created() {
    
54. 
    
55.     },
    
56.     methods: {
    
57.         init(dataList) {
    
58.             this.dialogVisible = true;
    
59.             this.dataList = dataList;
    
60.             this.getList();
    
61.         },
    
62.         handleClose(done) {
    
63.             done();
    
64.         },
    
65. 
    
66.         // 打印按钮的事件
    
67.         handlePrint() {
    
68.             let refPrint = this.$refs['myPrintPerson']
    
69.             refPrint && refPrint.print()
    
70.         },
    
71.     }
    
72. };
    
73. </script>

复制代码

1. 打印的模板

复制代码

1. 打印的模板组件
   
2. <template>
   
3.     <div>
   
4.       <button ref="printbtn" class="myprintbtn" v-print="'#myprintDom'"></button>
   
5.       <div id="myprintDom" class="nocalssvw">
   
6.         <div class="print-warp" style="page-break-before:always;" v-for="(item, ix) in list" :key="ix">
   
7.           <table border="1" class="primt-table print-tableOne">
   
8.             <thead>
   
9.               <tr>
   
10.                 <td style="width: 68px;" class="pt">姓名</td>
    
11.                 <td style="width: 58px;">张三</td>
    
12.                 <td style="width: 68px;" class="pt">性别</td>
    
13.                 <td style="width: 68px;" class="ptw84">男</td>
    
14.                 <td style="width: 68px;" class="pt">出生年月</td>
    
15.                 <td style="width: 68px;">1987.5.10</td>
    
16.                 <td rowspan="4" colspan="2" style="width: 120px;"></td>
    
17.               </tr>
    
18.               <tr>
    
19.                 <td class="pt">民族</td>
    
20.                 <td>汉</td>
    
21.                 <td class="pt">籍贯</td>
    
22.                 <td>汉</td>
    
23.                 <td class="pt">出生地</td>
    
24.                 <td>山东</td>
    
25.               </tr>
    
26.             </thead>
    
27.           </table>
    
28.         </div>
    
29.       </div>
    
30.     </div>
    
31.   </template>
    
32.    
    
33.   <script>
    
34.   export default {
    
35.     props: {
    
36.       list: {
    
37.         type: Array,
    
38.         default: () => [],
    
39.         required: true,
    
40.       },
    
41.     },
    
42.     data() {
    
43.       return {
    
44.         myPrint: {
    
45.           id: 'myprintDom',
    
46.           extarCss: ''
    
47.         }
    
48.       }
    
49.     },
    
50.     methods: {
    
51.       print() {
    
52.         this.$refs['printbtn'].click();
    
53.       }
    
54.     },
    
55.   }
    
56.   </script>

复制代码

总结
到此这篇关于vue项目纯前端实现的模板打印功能的文章就介绍到这了,更多相关vue纯前端模板打印功能内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/328971bdz.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！