纯前端导出PDF之采坑记录

最新推荐文章于 2024-08-16 19:09:54 发布

懒得懒

最新推荐文章于 2024-08-16 19:09:54 发布

阅读量943

点赞数 1

分类专栏： React框架前端工具

本文链接：https://blog.csdn.net/wuChiSha/article/details/103823688

版权

本文记录了在纯前端环境下导出PDF时遇到的挑战，包括导出的PDF模糊、部分区域泛白以及文字不清的问题。通过html2canvas和jsPDF库，作者详细分析了问题的原因并提出解决方案，如调整canvas参数、处理Card组件的背景色及确保文字颜色正确。尽管过程中遇到困难，最终在前端负责人的帮助下成功解决了问题。

摘要由CSDN通过智能技术生成

1、导出pdf思路

step1：将要导出的页面“截图”为图片（html2canvas）；

step2：将图片专为pdf，实现下载pdf功能（jsPDF）；

2、具体代码

  function exportPdf() {
    const target = document.getElementById('test');
    if (target) {
      html2canvas(target, {
        backgroundColor: '#151D4D',
        scale: 2,
      } as any).then((canvas: any) => {
        // 得到canvas画布的单位是px 像素单位
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        const pageData = saveAsBMP(canvas);
        const pdfX = (contentWidth / 2) * 0.75;
        const pdfY = (contentHeight / 2) * 0.75;

        // 设置内容图片的尺寸，img是pt单位
        const imgX = pdfX;
        const imgY = (contentHeight / 2) * 0.75;
        // @ts-ignore
        // eslint-disable-next-line new-cap,no-undef
        const PDF = new jsPDF