方法一:iframe实现:
优点:
- 可实现局部打印div;
- 页面在打印期间不会发生变形。
缺点:
- 获取不到页面的canvas标签数据。
代码如下:
const printpage = () => {
const printContent = document.querySelector('#print-content').innerHTML;
const iframe = document.createElement('iframe');
iframe.setAttribute('style', 'position: absolute; width: 0; height: 0;');
document.body.appendChild(iframe);
const iframeDoc = iframe.contentWindow.document;
// 设置打印展示方式 - 纵向展示
iframeDoc.write('<style media="print">@page {size: portrait;}</style>');
// 向 iframe 中注入 printContent 样式
iframeDoc.write(`<link href="./index.css" media="print" rel="stylesheet" />`);
// 写入内容
iframeDoc.write('<div>' + printContent + '</div>');
setTimeout(function(){
iframe.contentWindow?.print();
document.body.removeChild(iframe);
}, 200);
}
方法二:window.print()方法
优点:
- 可实现局部打印div;
- 可获取到页面的canvas标签数据。
缺点:
- 页面在打印期间会发生变形,用户体验感比较不好;
- 取消打印后会出现原页面按钮无法点击的bug需要重新加载页面。
代码如下:
const printpage = () => {
var printContents = document.getElementById("print-content").innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
方法三:使用html2canvas以及jspdf组件
优点:
- 可实现局部打印div;
- 通过html2canvas将页面包括canvas标签在内的数据转换为图片后,再结合jspdf将图片转换为pdf文件。
缺点:
- 打印的内容过长时会出现打印内容缺失的问题;
- 若页面内容包含http协议的图片等内容会有打印空白的现象。
代码如下:
先加载依赖包
npm install html2canvas
npm install jspdf
在需要打印的页面代码中引入并使用组件
// 引入pdf生成组件
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf'
const printpage = () => {
// 获取HTML元素
const element = document.getElementById("print-content");
const options = {
dpi: 192, //dpi属性的值为192,表示图像的分辨率
scale: 2, //scale属性的值为2,表示图像的缩放比例。
backgroundColor: "#F1F6FE" //backgroundColor属性的值为"#F1F6FE",表示图像的背景颜色。
};
// 将元素转换为canvas对象
html2canvas(element, options).then((canvas) => {
var contentWidth = canvas.width; //获取Canvas(上面元素id 'layout-wrapper')对象的宽度
var contentHeight = canvas.height; //获取Canvas(上面元素id 'layout-wrapper')对象的高度
// 创建jsPDF对象,导入jsPDF库,用于创建PDF文件
const pdf = new JsPDF('1', 'pt', [contentWidth, contentHeight]); //创建一个新的PDF对象,参数包括页面格式('1'表示A4纸张)、单位('pt')和页面尺寸([contentWidth, contentHeight])
var pageData = canvas.toDataURL('image/jpeg', 1.0); //将Canvas对象转换为JPEG格式的数据,并将其存储在pageData变量中。1.0表示图片质量
pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight); //将JPEG格式的图片添加到PDF文件中,图片的左上角坐标为(0, 0),宽度为contentWidth,高度为contentHeight
pdf.save("打印文件.pdf");
});
}