下载一个插件 npm i vue-print-nb –save
在main中引入 import Print from “vue-print-nb”
Vue.use(Print);
在postcss.config.js里面展示这个数据样式，如果你的项目中没有这个文件
那就下载一个插件”npm i postcss-px-to-view –save-dev”;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | module.exports = { plugins: { autoprefixer: {}, "postcss-px-to-viewport": { viewportWidth: 1920, // 视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸 // viewportHeight: 1344, // 视窗的高度，移动端一般指定1334，也可以不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除） viewportUnit: "vw", // 指定需要转换成的视窗单位，建议使用vw selectorBlackList: ['.nocalssvw'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名 exclude: [/printPersone/], // propList:["*", "!font-size"],//能转化为vw的属性列表 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值 mediaQuery: false // 允许在媒体查询中转换`px` } }}; |
创建一个和“selectorBlackList”里面名字一样的vue，如上：printPersone.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 父组件 <div> 打印<div> <table border="1" class="tableOne"><thead><tr><th>姓名</th> <td>张三</td> <th>性别</th> <td>男</td> <th>出生年月</th> <td>1985.5.10</td> <td rowspan="4" style="width: 130px"></td> </tr><tr><th>民族</th> <td>汉</td> <th>籍贯</th> <td>汉</td> <th>出生地</th> <td>山东</td> </tr></thead></table></div> </div>import PrintPerson from './components/printPersone.vue'export default { components: { PrintPerson, }, data() { return { dialogVisible: false, dataList: [], }; }, created() { }, methods: { init(dataList) { this.dialogVisible = true; this.dataList = dataList; this.getList(); }, handleClose(done) { done(); }, // 打印按钮的事件 handlePrint() { let refPrint = this.$refs['myPrintPerson'] refPrint && refPrint.print() }, }}; |
打印的模板
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | 打印的模板组件<div> <button class="myprintbtn"></button> <div id="myprintDom" class="nocalssvw"> <div class="print-warp"> <table border="1" class="primt-table print-tableOne"><thead><tr><td style="width: 68px" class="pt">姓名</td> <td style="width: 58px">张三</td> <td style="width: 68px" class="pt">性别</td> <td style="width: 68px" class="ptw84">男</td> <td style="width: 68px" class="pt">出生年月</td> <td style="width: 68px">1987.5.10</td> <td rowspan="4" colspan="2" style="width: 120px"></td> </tr><tr><td class="pt">民族</td> <td>汉</td> <td class="pt">籍贯</td> <td>汉</td> <td class="pt">出生地</td> <td>山东</td> </tr></thead></table></div> </div> </div> export default { props: { list: { type: Array, default: () => [], required: true, }, }, data() { return { myPrint: { id: 'myprintDom', extarCss: '' } } }, methods: { print() { this.$refs['printbtn'].click(); } }, } |
总结
到此这篇关于vue项目纯前端实现的模板打印功能的文章就介绍到这了,更多相关vue纯前端模板打印功能内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
