分页打印专题

一、简单的分页打印实现

在main.js中全局引入 print.js
print.js下载

// 引入 print.js
import print from '@/utils/print.js'
Vue.use(print) //注册

在打印页面

<div ref="print">
    <div class="no-print">不打印的内容</div>
    <img :src="item.qrCode" alt="" style="width:100px;"/>
</div>
<button type="primary" @click="print">确认打印</button>

  methods: {
    // 打印
    print() {
      this.$print(this.$refs.print) // 使用
    },
  },

打印被截断问题处理
1、使用分页符
https://www.runoob.com/cssref/pr-print-pagebb.html
2、动态计算块高度

二、在Vue2中将Base64编码的字符串转换为PDF，可以使用jsPDF库。以下是一个简单的示例代码：

import jsPDF from 'jspdf';

export default {
  methods: {
    downloadPDF(base64String) {
      const pdfDoc = new jsPDF();
      pdfDoc.addImage(base64String, 'JPEG', 0, 0, 210, 297);
      pdfDoc.save('download.pdf');
    }
  }
}

在这个示例中，我们首先导入了jsPDF库。然后，在Vue组件的方法中，我们定义了一个downloadPDF方法，该方法接收一个Base64编码的字符串作为参数。在方法中，我们创建了一个新的jsPDF实例，并使用addImage方法将Base64字符串添加到PDF文档中。最后，我们使用save方法将PDF文档保存到本地文件系统中。在这个示例中，我们将文件命名为“download.pdf”，但你可以根据需要更改文件名。

请注意，这个示例假设Base64字符串表示一个JPEG图像。如果你的Base64字符串表示一个不同类型的图像（例如PNG或GIF），则需要相应地更改第二个参数（即“JPEG”）。