React+Antd使用html2Canvas实现导出PDF

已于 2023-09-28 14:13:01 修改
阅读量1k 收藏 4
点赞数
文章标签： pdf vue.js 前端
于 2023-09-28 14:12:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_64317807/article/details/133382739
版权

首先，先了解一下html2Canvas的工作原理

html2Canvas的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。

它的屏幕截图是基于DOM的，因此可能不会100%精确到真实的表示，因为它不会生成实际的屏幕截图，而是基于页面上可用的信息构建屏幕截图。

从上面的介绍可以知道， html2Canvas的作用就是根据DOM元素生成对应的图片，所以我们可以使用它在H5端生成分享图，然后将其转化为DPF。

在使用html2Canvas之前，需要先下载其相应的依赖。

npm install html2canvas jspdf --save
yarn add html2canvas jspdf --save

以下代码是使用其的方式

首先根据页面DOM元素的高度将截成一张一张的图片，以便分页。

 // 将dom转化为canvas
    function toCanvas() {
      html2Canvas(children[i], {
        scale: scale,
        dpi: 500, // 导出pdf清晰度
        backgroundColor: '#F0F2F5', // 背景设为灰色（默认为黑色）
        allowTaint: true,
        taintTest: true,
      }).then((res) => {
        // 计算每个dom的高度，方便后面计算分页
        res.imgWidth = 595.28 / scale / 0.53;
        res.imgHeight = ((592.28 / res.width) * res.height) / scale / 0.53;
        canvas.push(res);
        i++;
        // 这里判断我是否已经全部将需要计算高度的节点计算完了，如果计算完高度就会添加到我定义的canvas数组里面，计算完了就执行分页并生成pdf，否则递归继续计算
        if (canvas.length === children.length) {
          paging();
          toPdf();
        } else {
          toCanvas();
          message.destroy();
          message.loading(`正在遍历第${[i]}个报表元素，请不要关闭窗口！`);
        }
      });
      // 这里是深层遍历时用到的判断，单独计算第三个子元素的每个子元素的高度，所以如果 i>1了也就意味着遍历到第三个节点了，第三个节点我要再去获取里面的子元素，在这里面在进行转化canvas(无需所以注释掉了)
      // else {
      //     html2Canvas(children[i], {
      //         scale: scale,
      //         useCORS: true,
      //         dpi: 500, // 导出pdf清晰度
      //         background: '#F0F2F5', // 背景设为灰色（默认为黑色）
      //         height: document.getElementById(id).scrollHeight,
      //         windowHeight: document.getElementById(id).scrollHeight
      //     }).then(res => { // 计算每个dom的高度，方便后面计算分页
      //         res.imgWidth = 595.28 / scale / 0.7;
      //         res.imgHeight = 592.28 / res.width * res.height / scale / 0.7;
      //         canvas.push(res);
      //         j++;
      //         console.log("******************", canvas);
      //         if (canvas.length === children.length + children[2].children.length - 1) {
      //             paging();
      //             toPdf();
      //         } else {
      //             toCanvas();
      //         }
      //     });

      // }
    }

然后，将截出来的图片封装成数组的形式，进行分页。

/**
     * [生成PDF文件]
     */
    function toPdf() {
      const PDF = new JsPDF('p', 'pt', 'a4');
      canvas.forEach((page, index) => {
        let allH = page[0].allH;
        let position = 20; // pdf页面偏移
        if (index !== 0 && allH <= 841.89) PDF.addPage();
        page.forEach((img) => {
          if (img.imgHeight < 841.89) {
            // 当某个dom高度小于页面宽度，直接添加图片
            // 这里的width除以多少取决于导出的页面在pdf页里面横向偏移的多少，可以修改这个除数进行对页面的横向调整
            PDF.addImage(
              img.toDataURL('image/jpeg', 1.0),
              'JPEG',
              img.imgWidth / 33,
              position,
              img.imgWidth,
              img.imgHeight,
            );
            position += img.imgHeight;
            allH -= img.imgHeight;
          } else {
            // 当某个dom高度大于页面宽度，则需另行处理
            while (allH > 0) {
              PDF.addImage(
                img.toDataURL('image/jpeg', 1.0),
                'JPEG',
                img.imgWidth / 5,
                position,
                img.imgWidth,
                img.imgHeight,
              );
              allH -= img.topH || 841.89;
              position -= img.topH || 841.89;
              img.topH = 0;
              if (allH > 0) PDF.addPage();
            }
            position = img.pageH;
          }
        });
      });
      PDF.save(title + '.pdf');
      message.destroy();
      message.success('生成PDF成功');
      setState(true);
      setButtonState(false);
    }
    toCanvas();
  }

最后，将分好页的图片导出PDF。

/**
     * [根据dom的高度初步进行分页，会将canvas组装为一个二维数组]
     */
    // dom 全部转化完成 开始计算分页
    function paging() {
      const imgArr = [[]];
      let pageH = 0; // 页面的高度
      let allH = 0; // 当前组所有dom的高度和
      let j = 0;
      for (let k = 0; k < canvas.length; k++) {
        // 涉及到k--的操作，使用for循环方便
        pageH += canvas[k].imgHeight;
        if (pageH > 841.89 && canvas[k].imgHeight < 841.89) {
          // 当某个页面装不下下一个dom时，则分页
          imgArr[j][0].allH = allH - canvas[k].imgHeight;
          allH = pageH = 0;
          k--;
          j++;
          imgArr.push([]);
        } else {
          if (canvas[k].imgHeight > 841.89) {
            // 特殊情况：某个dom高度大于了页面高度，特殊处理
            canvas[k].topH = 841.89 - (pageH - canvas[k].imgHeight); // 该dom顶部距离页面上方的距离
            pageH = (2 * canvas[k].imgHeight - pageH) % 841.89;
            canvas[k].pageH = pageH; // 该dom底部距离页面上方的距离
          }
          imgArr[j].push(canvas[k]);
          allH += canvas[k].imgHeight;
        }
        if (k === canvas.length - 1) imgArr[j][0].allH = allH;
      }
      canvas = imgArr;
    }

完整代码如下

function exportPDF({ id, title }) {
    var title = title || '标题'; // 导出文件名，默认为“标题”
    // 这里获取调用这个方法传过来的参数对象里面的类名，也就是需要导出为pdf元素的父盒子类名
    const ele = document.getElementById(id || 'pdf-cell');
    // 为做分页做准备，因为分页是根据每一个dom元素的高度来决定的，也不用细化到每一个dom元素，只是不希望被截断的dom元素都需要单独的拿出来计算高度，而不能获取整个大页面的高度
    // 这里的children取决于传过来的父元素，根据实际需求来获取需要的子元素
    const children = ele.children;

    // 定义一个空数组，来接收需要生成图片计算完高度的dom对象
    let canvas = [];
    //  这里的 i 和 j 根据实际需求添加  i 是定义的children的每一个dom元素的索引，每计算完一个高度，进行++运算然后递归
    let i = 0;
    // 这里的 j 是如果需要对定义的children的子元素更深层的遍历的话，需要拿到他下面的子元素高度的话，就另定义一个j变量，进行++运算再递归(无需所以注释掉了)
    // let j = 0;
    // scale是清晰度参数 数值越大，对应的清晰度越清晰，但是相对导出的文件大小也就越大，慎重修改，这里是根据你的窗口大小做判断
    const scale = window.devicePixelRatio > 1 ? window.devicePixelRatio : 2;
    // 将dom转化为canvas
    function toCanvas() {
      html2Canvas(children[i], {
        scale: scale,
        dpi: 500, // 导出pdf清晰度
        backgroundColor: '#F0F2F5', // 背景设为灰色（默认为黑色）
        allowTaint: true,
        taintTest: true,
      }).then((res) => {
        // 计算每个dom的高度，方便后面计算分页
        res.imgWidth = 595.28 / scale / 0.53;
        res.imgHeight = ((592.28 / res.width) * res.height) / scale / 0.53;
        canvas.push(res);
        i++;
        // 这里判断我是否已经全部将需要计算高度的节点计算完了，如果计算完高度就会添加到我定义的canvas数组里面，计算完了就执行分页并生成pdf，否则递归继续计算
        if (canvas.length === children.length) {
          paging();
          toPdf();
        } else {
          toCanvas();
          message.destroy();
          message.loading(`正在遍历第${[i]}个报表元素，请不要关闭窗口！`);
        }
      });
      // 这里是深层遍历时用到的判断，单独计算第三个子元素的每个子元素的高度，所以如果 i>1了也就意味着遍历到第三个节点了，第三个节点我要再去获取里面的子元素，在这里面在进行转化canvas(无需所以注释掉了)
      // else {
      //     html2Canvas(children[i], {
      //         scale: scale,
      //         useCORS: true,
      //         dpi: 500, // 导出pdf清晰度
      //         background: '#F0F2F5', // 背景设为灰色（默认为黑色）
      //         height: document.getElementById(id).scrollHeight,
      //         windowHeight: document.getElementById(id).scrollHeight
      //     }).then(res => { // 计算每个dom的高度，方便后面计算分页
      //         console.log("55555555555555555", res);
      //         res.imgWidth = 595.28 / scale / 0.7;
      //         res.imgHeight = 592.28 / res.width * res.height / scale / 0.7;
      //         canvas.push(res);
      //         j++;
      //         console.log("******************", canvas);
      //         if (canvas.length === children.length + children[2].children.length - 1) {
      //             paging();
      //             toPdf();
      //         } else {
      //             toCanvas();
      //         }
      //     });

      // }
    }
    /**
     * [根据dom的高度初步进行分页，会将canvas组装为一个二维数组]
     */
    // dom 全部转化完成 开始计算分页
    function paging() {
      const imgArr = [[]];
      let pageH = 0; // 页面的高度
      let allH = 0; // 当前组所有dom的高度和
      let j = 0;
      for (let k = 0; k < canvas.length; k++) {
        // 涉及到k--的操作，使用for循环方便
        pageH += canvas[k].imgHeight;
        if (pageH > 841.89 && canvas[k].imgHeight < 841.89) {
          // 当某个页面装不下下一个dom时，则分页
          imgArr[j][0].allH = allH - canvas[k].imgHeight;
          allH = pageH = 0;
          k--;
          j++;
          imgArr.push([]);
        } else {
          if (canvas[k].imgHeight > 841.89) {
            // 特殊情况：某个dom高度大于了页面高度，特殊处理
            canvas[k].topH = 841.89 - (pageH - canvas[k].imgHeight); // 该dom顶部距离页面上方的距离
            pageH = (2 * canvas[k].imgHeight - pageH) % 841.89;
            canvas[k].pageH = pageH; // 该dom底部距离页面上方的距离
          }
          imgArr[j].push(canvas[k]);
          allH += canvas[k].imgHeight;
        }
        if (k === canvas.length - 1) imgArr[j][0].allH = allH;
      }
      canvas = imgArr;
    }
    /**
     * [生成PDF文件]
     */
    function toPdf() {
      const PDF = new JsPDF('p', 'pt', 'a4');
      canvas.forEach((page, index) => {
        let allH = page[0].allH;
        let position = 20; // pdf页面偏移
        if (index !== 0 && allH <= 841.89) PDF.addPage();
        page.forEach((img) => {
          if (img.imgHeight < 841.89) {
            // 当某个dom高度小于页面宽度，直接添加图片
            // 这里的width除以多少取决于导出的页面在pdf页里面横向偏移的多少，可以修改这个除数进行对页面的横向调整
            PDF.addImage(
              img.toDataURL('image/jpeg', 1.0),
              'JPEG',
              img.imgWidth / 33,
              position,
              img.imgWidth,
              img.imgHeight,
            );
            position += img.imgHeight;
            allH -= img.imgHeight;
          } else {
            // 当某个dom高度大于页面宽度，则需另行处理
            while (allH > 0) {
              PDF.addImage(
                img.toDataURL('image/jpeg', 1.0),
                'JPEG',
                img.imgWidth / 5,
                position,
                img.imgWidth,
                img.imgHeight,
              );
              allH -= img.topH || 841.89;
              position -= img.topH || 841.89;
              img.topH = 0;
              if (allH > 0) PDF.addPage();
            }
            position = img.pageH;
          }
        });
      });
      PDF.save(title + '.pdf');
      message.destroy();
      message.success('生成PDF成功');
    }
    toCanvas();
  }

在调用时，传入id和title，id为要导出的PDF页面元素的最外层的元素的id，title是要导出的PDF文件的名称。如：

import React from 'react';
import { Button } from 'antd';
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';


export default () => {
  const onClick = async () => {
    exportPDF({ id: 'toPdf', title: reportTitle });
  };
    
  function exportPDF({ id, title }) {
    ...
  }

  return (
    <Button onClick={onClick}>导出</Button>
    <div id="toPdf">
        <div>这是一个PDF文件</div>
    </div>
  );
};

Linux常用命令之find命令详解
weixin_56303229的博客
11-13 3511
find 命令是一个功能强大且灵活的工具，可以满足多种文件和目录搜索需求。通过合理使用其各种选项和表达式，可以高效地完成复杂的文件管理任务。了解 find 命令的使用方法，可以在日常的系统管理和开发工作中提高效率，同时避免不必要的数据丢失。
find命令
void的博客
12-03 8583
查找文件。
find命令详解
weixin_64447699的博客
09-22 5737
find命令用于在指定的目录及其子目录中查找符合条件的文件和目录。它支持复杂的搜索条件组合，并能对搜索结果执行各种操作，是系统管理员和开发人员日常工作中不可或缺的工具。
Linux的Find命令
YCyjs的博客
06-14 3万+
格式find查找的范围类型查找数据。
Linux find命令
菜鸟记录
01-28 4674
⏹Linux find命令
Linux中find命令详解
qq_40804558的博客
09-30 1980
linux中find命令详解
Linux命令之find命令
月生的静心苑
04-07 4万+
Linux find 命令用来在指定目录下查找文件。任何位于参数之前的字符串都将被视为欲查找的目录名。如果使用该命令时，不设置任何参数，则 find 命令将在当前目录下查找子目录与文件。并且将查找到的子目录和文件全部进行显示。find 命令有非常大的灵活性，可以向其指定丰富的搜索条件（如文件权限、属主、属组、文件类型、日期和大小等）来定位系统中的文件和目录。此外，find 还支持对搜索到的结果进行多种类型的命令操作。
Linux中find命令
weixin_69209121的博客
07-15 5200
1.find命令1.find命令Linux find 命令用于在指定目录下查找文件和目录。它可以使用不同的选项来过滤和限制查找的结果。2.基本语法find [⽂件路径] [选项选项的值-name *-type f|d。
find 命令：搜索文件
qq_38641599的博客
09-15 1835
​find​命令的作用是搜索文件和目录。相关命令：locate、whereis‍。
全面掌握find命令：使用与用法详解
热门推荐
沉淀所学，分享所思，让热爱与成长同行。商务记录AI实战经验，助力开发者快速成长。 热爱AI，希望做出有影响力的技术成果。 技术点亮生活，分享连接价值与机会。 专注AI落地实战，陪你走好技术每一步。
06-24 5万+
大家好，我是默语，擅长全栈开发、运维和人工智能技术。在这篇博客中，我将详细讲解Linux中的find命令。这是一个强大且灵活的文件搜索工具，可以根据文件名、类型、大小和修改时间等条件进行搜索，并执行特定操作。通过本篇文章，你将全面掌握find命令的使用方法和注意事项。无论你是初学者还是经验丰富的开发者，都能从中获益。🔍📂findfindfind [搜索路径] [搜索条件] [操作]搜索路径：指定从哪个目录开始搜索，默认为当前目录。搜索条件：指定要查找文件的条件，如文件名、类型等。操作。
使用find命令查找Linux中的隐藏文件的方法.docx
09-27
使用find命令查找Linux中的隐藏文件的方法 find命令是Linux和Unix系统中最强大和灵活的命令之一，能够根据不同的选项和参数来实现各种文件搜索和管理任务。下面将详细介绍如何使用find命令查找Linux中的隐藏文件。 ...
find命令查询指定时间的大文件并删除
01-09
在Linux系统中，`find`命令是一个非常强大的工具，用于在文件系统中查找符合特定条件的文件。本文将详细介绍如何使用`find`命令查询指定时间内的大文件，并演示如何配合`rm`命令进行删除。 首先，我们要理解`find`...
Linux中find命令的用法入门
01-10
Linux系统下的Find 命令具有很强大的搜索功能，可以遍历整个文件系统。所以 find 命令很耗资源，有时候甚至会耗费很长时间，因此建议把它放在后台执行。 Find 命令格式如下所示： find pathname -options [-print -...
海思3519V200ARM Linux 下移植 Qt5.8.0
LNN2022的博客
05-26 927
本文介绍了将Qt5.8.0图形框架移植到海思3519V200嵌入式芯片平台的具体过程。首先阐述了移植的背景意义，然后详细说明了硬件环境准备、软件环境配置、Qt源码交叉编译等步骤。重点讲解了如何修改LinuxFB插件以适配海思平台，包括MPP系统和VO模块的初始化。最后通过测试验证移植效果，并展望了Qt在该平台上的应用前景。整个移植过程涉及环境配置、源码修改、交叉编译等多个技术环节，为嵌入式设备开发提供了强大的GUI支持。
【Linux】借助gcc源码修改，搜索头文件当前进展
05-22 366
在使用修改源代码编译的GCC，进行编译内核源代码时，好像性能要慢不少，有可能是打印日志操作有文件IO导致，也有可能是gcc编译的会不会不是release版本不太对，不太清楚。从上图可以看出对于每次的搜索，都是从第一个目录开始搜索，图里也可以看到修改源代码所在的目录，函数，行，昨天的博客感觉对于找到的位置还是不太好。其实，linux内核在编译时和链接时所使用的源代码不一定相同，也即编译能通过，但是链接会报缺少文件这类问题，下一步想找找链接时对于源文件搜索。这里也有一些gcc系统头文件目录搜索。
linux如何查看网络设备类型
最新发布
小诸葛的博客
05-27 425
参数会显示设备的详细信息，包括类型。例如，输出中可能包含。运行该命令后，查看输出中网络设备的名称和类型。文件不存在，可能是非 TUN/TAP 设备。Linux 系统中网络设备的信息存储在。是具体的网络接口名（如。输出会显示驱动信息。
Linux 搭建FTP服务器(vsftpd)
Stringzhua的博客
05-22 1295
或者修改/etc/selinux/config文件，将SELINUX=enconfig改为SELINUX=disabled，然后重启系统。在Linux上查看，发现已经有了scptoserver.txt文件，说明文件复制到服务器成功！默认即可，如果有需要可以修改/etc/ssh/sshd_config文件。scp 本地文件 user@远程服务器IP:/远程目录/在win10使用git的bash窗口上传文件到Linux。scp root@远程服务器ip:/远程文件 本地目录/
Linux下的Socket编程
m0_74310998的博客
05-22 1036
网络通信前，通信双方需要知道本机与对方主机的IP地址，方可进行通信。在IP数据报的报头中需要包含有和这两个地址，源IP地址即为本机地址，目的IP地址即为对方地址。其中，在报头中包含的目的IP地址用于本机向对方主机发送请求报文，而源IP地址则是使对方主机能知道该报文的发送方身份。当对方主机将报文处理完毕后，会将作为，从而对不同主机的请求进行正确响应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值