将网页保存为PDF---不分页

简单点了2024-09-06 12:23

将网页保存为PDF---不分页

1.要下载的内容

复制代码

<div ref="reportContent">

写入要下载的内容
</div>

2.下载的方法

复制代码

    downloadPDF() {
      html2canvas(this.$refs.reportContent, {
        scale: 1.5, // 降低缩放比例来减少图像大小（从2降到1.5）
        useCORS: true,
        width: this.$refs.reportContent.scrollWidth,
        height: this.$refs.reportContent.scrollHeight,
        scrollY: -window.scrollY
      }).then((canvas) => {
        const imgData = canvas.toDataURL('image/jpeg', 1); // 使用JPEG格式并调整质量

        // A4宽度 (单位：mm)
        const pdfWidth = 210;
        // 根据内容计算PDF高度 (单位：mm)
        const imgWidth = pdfWidth;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        const pdfHeight = imgHeight;
        const pdf = new jsPDF('p', 'mm', [pdfWidth, pdfHeight]);
        pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight); // 使用JPEG格式
        pdf.save(
          `${this.name}_${this.formatDate}.pdf`
        );
      });
    },