【JS】实现页面打印的方法_js 排版打印

方法一：iframe实现：

优点：

1. 可实现局部打印div；
2. 页面在打印期间不会发生变形。

缺点：

1. 获取不到页面的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);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'
运行
运行

方法二：window.print()方法

优点：

1. 可实现局部打印div；
2. 可获取到页面的canvas标签数据。

缺点：

1. 页面在打印期间会发生变形，用户体验感比较不好；
2. 取消打印后会出现原页面按钮无法点击的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;
}
1
2
3
4
5
6
7
'
运行
运行

方法三：使用html2canvas以及jspdf组件

优点：

1. 可实现局部打印div；
2. 通过html2canvas将页面包括canvas标签在内的数据转换为图片后，再结合jspdf将图片转换为pdf文件。

缺点：

1. 打印的内容过长时会出现打印内容缺失的问题；
2. 若页面内容包含http协议的图片等内容会有打印空白的现象。

代码如下：

先加载依赖包

npm install html2canvas
npm install jspdf
1
2

在需要打印的页面代码中引入并使用组件

// 引入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");
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23