前端下载PDF

前端下载PDF

pdfDownload() {
  const myBox = this.$refs.printIframe; // 获取ref里面的内容
  html2canvas(myBox, {
    useCORS: true, // 是否尝试使用CORS从服务器加载图像
    allowTaint: true,
    dpi: 300, // 解决生产图片模糊
    scale: 3, // 清晰度--放大倍数
  }).then((canvas) => {
    const contentWidth = canvas.width;
    const contentHeight = canvas.height;
    // eslint-disable-next-line no-mixed-operators
    const pageHeight = contentWidth / 592.28 * 841.89; // 一页pdf显示html页面生成的canvas高度;
    let leftHeight = contentHeight; // 未生成pdf的html页面高度
    let position = 0; // pdf页面偏移
    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    // let imgWidth = 595.28
    const imgWidth = 560.28; // 宽度
    // eslint-disable-next-line no-mixed-operators
    const imgHeight = 592.28 / contentWidth * contentHeight;
    const pageData = canvas.toDataURL('image/jpeg', 1.0);
    const PDF = new JsPDF('', 'pt', 'a4');

    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    // 当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight);
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight);
        leftHeight -= pageHeight;
        position -= 841.89;
        if (leftHeight > 0) {
          PDF.addPage();
        }
      }
    }
    PDF.save('PDF.pdf');// 下载标题
  });
},