前端实现导出图片，导出PDF（截图原理）

这篇博客介绍了如何在前端实现图片和PDF的导出功能。首先，通过'dom-to-image'库将HTML元素转换成JPEG图片并保存。然后，使用'html2canvas'结合'jspdf'库将指定内容转换为高质量PDF文件，支持分页和内容调整。这些方法对于前端开发者在项目中实现静态内容导出非常实用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

导出图片

1.安装依赖

yarn add dom-to-image 或 npm install dom-to-image --save
yarn add file-saver 或 npm install file-saver --save

2.代码实现

//导入包
import domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';

//导出图片
  handleExportPhoto = ()=>{
  	//exportNode为挂载你想导出图片区域的容器id
    const node = document.getElementById("exportNode");
    domtoimage.toJpeg(node,{quality:0.95})
    .then((defaultUrl) => {
      var link  = document.createElement('a');
      link.download = '导出图片.jpeg';
      link.href = defaultUrl;
      document.body.appendChild(link);
  　　link.click();
      document.body.removeChild(link);
    });
  }

导出PDF

1. 安装依赖

npm install -S html2canvas jspdf

2. 代码实现

//导入包
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas'

handleExportPDF = ()=>{
    const element = document.getElementById("exportNode");
    window.pageYOffset = 0;
    document.documentElement.scrollTop = 0
    document.body.scrollTop = 0
    html2canvas(element,{
    // height: node.offsetHeight,
    allowTaint: true,
    // allowTaint: true,
    logging:true,
    scale: 2 // 提升画面质量，但是会增加文件大小
    }).then(function (canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 592.28 / contentWidth * contentHeight;

        var pageData = canvas.toDataURL('image/jpeg', 1.0);

        var pdf = new jsPDF('', 'pt', 'a4');

        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过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.setFont('simsun');
        pdf.save('导出PDF.pdf');
    });
  }