vue实现页面打印

原创已于 2022-11-22 21:39:40 修改 · 1.5k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端 #打印

收录于

于 2022-11-22 21:38:13 首次发布

vue 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用html2canvas、jsPDF及print-js等前端库实现网页内容到PDF的转换及打印的方法。通过调整纸张边距和计算图像大小，确保内容适配A4纸张，并实现了PDF文件的导出与打印。

安装需要依赖

npm i html2canvas --save
npm i jspdf --save
npm i print-js --save

页面导入

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'
import printJS from 'print-js'

实现方法

// 纸张的边距
const margin = 30
// 先把需要打印的页面内容转为canvas，避免各种样式问题
const canvas = await html2canvas(this.$refs['content'])
// 计算canvas内容在A4纸张上的宽度和高度
// a4纸的尺寸[595.28, 841.89]
const imgWidth = 841.89 - margin * 2
const imgHeight = 841.89 / (canvas.width / canvas.height) - margin * 2
// 将canvas转换成图片地址
const pageData = canvas.toDataURL('image/jpeg', 1.0)
// 初始化pdf
// l：横向  p：纵向
// 测量单位（"pt"，"mm", "cm", "m", "in" or "px"）
const pdf = new jsPDF('l', 'pt', 'a4')
// 将图片写入pdf中
pdf.addImage(pageData, 'JPEG', margin, margin, imgWidth, imgHeight)
// pdf增加空白页
pdf.addPage()
// 打印pdf
printJS({
  printable: pdf.output('bloburi'),
  type: 'pdf',
  scanStyles: false,
})