vue中使用vue-print.js实现多页打印

本文主要介绍了vue项目中使用print.js打印,解决多页,分页,打印预览样式修改等问题。 引入安装vue-print.js cnpm i vue-printjs --save-dev 解决打印多页只出现一页问题 由于打印插件存在问题,如果打印文件超出一页,只显示一页,所以我们需要修改print.js源文件,所以只能手动下载vue-print.js到本地,做一些修改,然后引入到项目中,不能使用npm安装 下载 print.js https://github.com/zxc19890923/print/blob/master/print.js 在src目录下面创建plugins/pri 在Vue项目中,有时我们需要为用户提供打印功能,这时可以借助vue-print.js这个库来实现。本文将详细讲解如何在Vue环境中使用vue-print.js解决多页打印、分页以及打印预览样式修改的问题。 我们需要引入和安装vue-print.js。在终端中执行以下命令: ```bash npm i vue-printjs --save-dev ``` 然而,这里存在一个问题:默认的打印插件可能会导致打印内容超出一页时只显示一页。为了解决这个问题,我们需要下载vue-print.js的源代码到本地进行修改。你可以从GitHub上获取源码: ```markdown https://github.com/zxc19890923/print/blob/master/print.js ``` 下载后,将其放置在项目中的`src/plugins/print/Print.js`文件中。 接下来,我们需要修改`Print.js`文件。在`getStyle`方法中,添加以下CSS代码,确保所有元素的高度自动适应,并设置字体大小: ```javascript str += "<style>html,body,div{height: auto!important;font-size:14px}</style>"; ``` 这有助于解决多页打印只显示一页的问题。 在项目的主入口文件(通常为`main.js`)中,引入并注册自定义的`Print`插件: ```javascript import Print from './plugins/print/Print' Vue.use(Print) ``` 现在,我们可以在Vue组件中使用打印功能。例如,我们可以创建两个div,一个用于显示给用户看的内容,另一个用于打印的内容: ```html <div class="show">这是展示的需要打印的内容,给用户看的。</div> <div ref="print" class="recordImg" id="print"> 这里是需要打印的内容,出现在打印预览的界面,这里的样式需要写在 @media print {}里面。 如果需要设置预览页规则,页脚等样式 @page {}。 <div class="no-print">不需要打印的内容</div> <div class="do-not-print-div">不要打印我</div> <button @click="printContext">打印</button> </div> ``` 在Vue组件的`methods`对象中,定义`printContext`方法来调用打印功能: ```javascript methods: { printContext () { // 方法1:通过添加no-print样式类来隐藏不需要打印的内容 this.$print(this.$refs.print) // 方法2:通过传递参数来指定不需要打印的元素 // this.$print(this.$refs.print, {'no-print': '.do-not-print-div'}) } } ``` 在CSS中,对于需要在打印预览中显示的样式,应该写在`@media print`选择器内。对于不需要打印的元素,有两种控制方法: 1. 给不需要打印的元素添加`no-print`类。 2. 在调用`this.$print`方法时,通过传递`{'no-print': '.do-not-print-div'}`参数来指定不打印的CSS选择器。 总结一下,实现Vue项目中的多页打印需要以下几个步骤: 1. 安装vue-print.js并下载源码进行修改。 2. 在主文件中引入并注册修改后的`Print`插件。 3. 在Vue组件中设置打印内容和样式,以及控制打印的行为。 4. 使用`this.$print`方法触发打印,通过CSS或参数控制不需要打印的内容。 遵循以上步骤,你可以有效地解决Vue项目中的多页打印问题,并对打印预览样式进行自定义。























- qq_399357702021-02-01如果有实例就好了

- 粉丝: 9
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源


