jspdf 使用 html-to-image图片模糊解决

824 阅读1分钟

使用html-to-image导出pdf中发现图片清晰度不够,记录下修改方式

      const A4_WIDTH = 595.28
      const ele = document.querySelector(‘YOU SELECTOR’);
      const contentHeight = ele.clientHeight; // 实际图片根据canvas转化,根据内容会变
      const contentWidth = ele.clientWidth;
      let that = this,
        scale = 2;

      const pageData = await domtoimage.toJpeg(ele, {
      
            height: contentHeight * scale,
            width: contentWidth * scale,
            quality: 1, // 1 是最高质量 
            style: {
              transform: `scale(${scale})`, // 指定缩放比例
              transformOrigin: 'top left', // 指定缩放基点
              background: '#fff',
            },
        },
      });
      
      const PDF = new jsPDF('p', 'pt', 'a4');
      const imgHeight = (A4_WIDTH / contentWidth) * contentHeight;
      PDF.addImage(pageData, 'JPEG', 0, 0, A4_WIDTH, imgHeight);