| [code]下载一个插件 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";[/code]
[code]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`
}
}
};[/code]
[code]创建一个和“selectorBlackList”里面名字一样的vue，如上：printPersone.vue[/code]
[code]父组件
<template>
<div>
<el-dialog title="表" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
<el-button type="primary" plain style="margin-bottom:5px;" @click="handlePrint">打印</el-button>
<el-row>
<el-col :span="12">
<div>
<table border="1" class="tableOne" v-for="(item, index) in dataList" :key="index">
<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>
</el-col>
</el-row>
<!-- 引用谁人打印的模板 -->
<print-person ref="myPrintPerson" :list="dataList" />
</el-dialog>
</div>
</template>
<script>
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()
},
}
};
</script>[/code]
[code]打印的模板[/code]
[code]打印的模板组件
<template>
<div>
<button ref="printbtn" class="myprintbtn" v-print="'#myprintDom'"></button>
<div id="myprintDom" class="nocalssvw">
<div class="print-warp" style="page-break-before:always;" v-for="(item, ix) in list" :key="ix">
<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>
</template>
<script>
export default {
props: {
list: {
type: Array,
default: () => [],
required: true,
},
},
data() {
return {
myPrint: {
id: 'myprintDom',
extarCss: ''
}
}
},
methods: {
print() {
this.$refs['printbtn'].click();
}
},
}
</script>[/code]
总结 到此这篇关于vue项目纯前端实现的模板打印功能的文章就先容到这了,更多相关vue纯前端模板打印功能内容请搜索脚本之家以前的文章或继承欣赏下面的相关文章盼望各人以后多多支持脚本之家！ 来源：https://www.jb51.net/javascript/328971bdz.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
/6 
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-7-2 03:40 , Processed in 0.037034 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
