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项目中的多页打印问题，并对打印预览样式进行自定义。