经我研究多天,因为我是从接口拿的数据,数据量会很多,但是vue-print-nb这个插件只打印了21条表格数据,又尝试了print.js的方法,依旧不行,达不到我想要的效果,然后我继续研究了vue-print-nb这个打印方法。。。 第一步:vue项目得下个依赖包,命令是 npm install vue-print-nb --save 下载依赖成功后 第二步:全...
import{reactive,ref}from"vue";let penaltyRequestForm=reactive({// idid:'',// 罚款单编号number:"20241025001",// 被扣款单位和个人deductionPerson:"代雄伟",// 扣款事项deductionMatters:"就是想扣你钱",// 扣款金额deductionAmount:"64800.00",// 扣款方式deductionMethod:"运费/工资中扣除",// 备注rema...
在需要打印的vue页面里,写入以下样式: @page{ size: auto;margin:3mm; }html{background-color:#ffffff;height: auto;margin:0px; }body{border: solid1px#ffffff;margin:10mm15mm10mm15mm; }
1. 检查CSS样式 确保你的CSS样式没有引起额外的空白页。可以尝试在打印预览中调试你的页面样式。 @media print { body { margin: 0; padding: 0; } .print-area { margin: 0; padding: 0; /* 确保内容高度适合打印纸张 */ height: auto; } } 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12...
使用vue-print-nb 打印table,数据是后端接口返回的动态数据,当时数据很多时,打印预览的表格还是只有一页,如下图:数据太多,中间省略未截图。打印预览如下,只有一页:
<el-button type="primary" @click="dialogVisible" v-print="printObj">打印</el-button> data: printObj: { id: 'printMe',//id popTitle: "标题",//自定义设置标题 }, 四:插件优化 1.去掉页眉页脚 @page { size: auto; margin: 0mm; } 2....
打印 mock数据 新建poetries.ts文件,准备好古诗词 渲染数据,添加打印按钮 查看打印效果 一首词被分到两页去了,不满足需求 自动分页 通过设置style="page-break-after:always"可以实现打印分页 现在就是需要按class="poetry"的div进行分割,考虑到每张A4纸高度固定,所以通过判断每个poetry div的高度累加,当加上某个div...
使用vue-print-nb 实现分页打印循环,可以通过动态生成打印内容并在需要分页的地方插入分页符来实现。以下是一个基于 Vue 3 和 vue3-print-nb 的示例,展示了如何实现分页打印循环: 1. 安装 vue3-print-nb 首先,你需要安装 vue3-print-nb 插件: bash npm install vue3-print-nb --save 2. 在 Vue 项目中...
在网上找了一个打印组件vue-print-nb 本博客源码:https://github.com/shengbid/vue-print,这里面只放了打印组件的代码,只需要这个功能的下载这个 https://github.com/shengbid/vue-demo这个项目里平时博客写的一些功能的代码都放在里面,有需要可以下载看看,有帮助的话点个star哈 ...
在vue3项目中，首先在main.ts中进行vue3-print-nb的配置。然后，我们创建了一个mock数据文件poetries.ts，存放古诗词信息。接下来，将这些诗词渲染到页面上，并添加一个用于触发打印的按钮。然而，实际测试中发现，一首诗词被分到了两张A4纸上，这显然不符合需求。为了实现自动分页打印，我们需要对打印...