关于前端页面的打印成PDF,有不同的方法。
- window有一个自带的print(),window.print() 。
(1)这个方法比较简单明了, 调用方法,就会打印出body里面的内容,这种方法根据弹窗,可以自主选择是否添加页眉页脚,横屏竖屏等功能,比较灵活。
(2)同时,根据项目,有可能需要在打印的时候显示或隐藏某些内容,或者在打印的时候修改样式等,此刻需要: @media print {} 把需要打印的时候出现的特殊样式,写到这个函数里面,即可在打印的时候起作用,在页面显示的时候不会有效果。
(3) 可以搭配Window matchMedia() 方法,来捕获打印这一个动作, 可以进行一些比如打印之前或者之后的一些操作,matchMedia()返回一个新的媒体查询对象,
if (window.matchMedia(“(max-width: 900px)”).matches) {
/* 窗口小于或等于 900 像素 */
} else {
/*窗口大于 900 像素 */
}
addListener(functionref)添加一个监听函数,在执行监听函数监听的操作的时候,会触发某些改变,
if (window.matchMedia) { var mediaQueryList = window.matchMedia('print'); //页面的打印添加监听事件 mediaQueryList.addListener(function(mql) { if (mql.matches) { //打印之前可以自主的进行一些操作 } else { //打印之后可以自主的进行一些操作 } }); }
- jsPDF 和 html2canvas 搭配使用打印页面,这种方法,也更灵活, 可以挑选自己想要打印的部分,也可以加入自己的一些想法。这种方法需要加入水印的时候,个人没有找到更好的办法,我个人是根据分页部分,给元素设置的背景颜色,这种方法其实有弊端,当不同的设备打印的时候,会因为设备不同,页面显示不同,分页部分也不同, 需要自己去做分页地方的不同设备的兼容。
const downloadPdf = () => {
// jsPDF 的第一个参数, p代表竖屏,l 代表横屏
var pdf = new jsPDF('p', 'pt', 'letter');
pdf.canvas.height = 72 * 11;
pdf.canvas.width = 72 * 8.5;
//需要打印的内容 ,可以自主选择需要打印的部分
const dom = document.getElementById('dom')
setTimeout(() => {
if (dom) {
html2canvas(dom).then(function (canvas: { width: any; height: any; toDataURL: (arg0: string, arg1: number) => any; }) {
const contentWidth = canvas.width;
const contentHeight = canvas.height;
// 一页pdf显示html页面生成的canvas高度;
const pageHeight = (contentWidth / 592.28) * 841.89;
// 未生成pdf的html页面高度
let leftHeight = contentHeight;
// 控制页面是否偏移
let position = 0;
const imgWidth = 595.28;
//第一个数字可以控制页面的拉伸,可以在需要的情况下适当修改大小
const imgHeight = (580 / contentWidth) * contentHeight;
const pageData = canvas.toDataURL('image/jpeg', 1.0);
// jsPDF 的第一个参数, p代表竖屏,l 代表横屏
// eslint-disable-next-line new-cap
const pdf = new jsPDF('p', 'pt', 'a4');
// 当内容未超过pdf一页显示的范围,无需分页, 页面内容过长不分页,打印出来的是一个长文档。
if (leftHeight < pageHeight) {
pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
} else {
while (leftHeight > 0) {
pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
leftHeight -= pageHeight;
position -= 841.89;
if (leftHeight > 0) {
pdf.addPage();
}
}
}
pdf.save(`结果.pdf`);
});
}
}, 0)
};