vue html转PDF并下载

如果想要分页并且可以添加水印去pdf，则参考这位大佬
vue3 如何将页面生成 pdf 导出 - 掘金 (juejin.cn)

如果想解决 图片跨域，pdf模糊， pdf页边距 的 bug 问题，参考这位
vue实现HTML转PDF (已解决清晰、页边距、图片跨域导出等问题)_vuer html转换成pdf html2pdf多页-CSDN博客
如果想避免被分页截断 参考这位大佬
vue页面生成pdf且避免分页截断处理 - 简书 (jianshu.com)

如果不想分页，根据以上大佬的提示:
自己实践了一下

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf'

export const htmlToPDF = async (htmlId, title = "报告", bgColor = "#fff") => {
  try {
    const pdfDom = document.querySelector(htmlId);
    pdfDom.style.padding = "0 10px !important";
    const canvas = await html2canvas(pdfDom, {
      scale: 4,
      useCORS: true,
      backgroundColor: bgColor,
      dpi: window.devicePixelRatio * 2,
    });
    const width = canvas.width / 4
    const height = canvas.height / 4;
    
    const pageData = canvas.toDataURL("image/jpeg", 1.0);
    const PDF = new jsPDF("p", "mm", [width, height]);
    PDF.addImage(pageData, "JPEG", 0, 0, width , height);
    PDF.save(title + ".pdf");
    return { r : true }
  } catch (err) {
    return { r : false, err }
  }
};

 htmlToPDF('#report-pdf', tReport.value).then(res => {
      if (res.r) {
      } else {
        console.log(res.err);
        ElMessage.error('下载报告失败,请联系技术人员...')
      }
    })