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

将网页保存为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`
        );
      });
    },
相关推荐
huaweichenai19 小时前
spring boot操作PDF
java·spring boot·pdf
开开心心就好1 天前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
泡海椒2 天前
PDF 表格样式优化:jquick-pdf 边框、圆角、背景色
java·开发语言·pdf
泡海椒3 天前
jquick-pdf 表格实战:动态数据 PDF 报表生成
java·开发语言·pdf
泡海椒3 天前
jquick-pdf 表格行列尺寸控制实战:单元格合并的可行边界
java·开发语言·pdf
java_logo4 天前
Docker 部署 Gotenberg 完整教程:Compose 搭建文档转 PDF API
docker·pdf·chromium·libreoffice·文档转换·轩辕镜像·gotenberg
泡海椒4 天前
jquick-pdf 防止 PDF 内容分页断裂:keepTogether 属性妙用
java·开发语言·pdf
泡海椒4 天前
jquick-pdf 文本元素实战:段落、行内文本、制表符用法详解
java·开发语言·pdf
SamChan905 天前
Python 处理小语种 PDF 的编码坑:重音字符、连字与 (cid:xx) 乱码的解决方案
python·ai·pdf·机器翻译
微咣科技5 天前
平台化工业AI再突破|大捷智能携手岚图汽车,打造车身焊装智能设计行业标杆
pdf·音视频