- 首先下载 :
-
npm install vue3-print-nb --save //全局挂载一下 /main.js import print from "vue3-print-nb"; app.use(print)
- 下面就是使用
-
<el-button size="large" type="primary" v-print="printObj">打 印</el-button> <div class="box" id="main"><div> const printObj = reactive({ id: "main", // 这里是要打印元素的ID popTitle: "", // 打印的标题 extraCss: "", // 打印可引入外部的一个 css 文件 extraHead: "", // 打印头部文字 }); <style lang="scss" scoped> /*去除页眉页脚*/ @page { size: auto; /* auto is the initial value */ margin: 3mm; /* this affects the margin in the printer settings */ } html { background-color: #ffffff; margin: 0; /* this affects the margin on the html before sending to printer */ } body { border: solid 1px blue; margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */ } /*去除页眉页脚*/ </style>
记vue3+打印
最新推荐文章于 2024-07-10 09:41:19 发布