LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[转帖]前端界面生成PDF并导出下载

freeflydom
2023年8月18日 8:37 本文热度 362

思路: 通过 html2canvas 将 HTML 页面转换成图片,然后再通过 jspdf 将图片的 base64 生成为 pdf 文件


npm install html2canvas --save 


npm install jspdf --save

文档:http://html2canvas.hertzen.com/configuration


其中,文档中还缺少dpi,dpi就是像素的意思,dpi的值越大,证明图片约清晰,我这里选择的是300

注意事项:界面隐藏、透明度为0都不能够截图成功

3、jspdf

文档:https://www.freesion.com/article/97121153598/
https://parall.ax/products/jspdf
https://www.hangge.com/blog/cache/detail_2205.html

每个文档介绍的不是很全面,所以,需要几个文档对比观看下


import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'


export const getPdf = (title) =>{

    return new Promise(resolve => {

        html2Canvas(document.queryselector('#resultsHuiZongTableId'), {

            allowTaint: false,

            useCORS: true, // allowTaint、useCORS只能够出现一个

            imageTimeout: 0,

            dpi: 300,  // 像素

            scale: 4,  // 图片大小

        }).then(function (canvas) {

            // document.body.appendChild(canvas)

            // 用于将canvas对象转换为base64位编码

            let pageData = canvas.toDataURL('image/jpeg', 1.0),

                canvasWidth = canvas.width,

                canvasHeight = canvas.height,

                concentWidth = 500,

                concentHeight = Math.round((concentWidth / canvasWidth) * canvasHeight),

                position = 72,

                pageHeight = 892,

                height = concentHeight

            console.log(height, pageHeight)

            // 新建一个new JsPDF,A3的像素大小 842*1191,A4的像素大小 592*841。这个px像素不准确,不清楚他们的像素大小来源如何

            let PDF = new JsPDF('p', 'px', 'a3')

            if (height <= pageHeight) {

                // 添加图片

                PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight)

            } else {

                while (height > 0) {

                    PDF.addImage(pageData, 'JPEG', 68, position, concentWidth, concentHeight)

                    height -= pageHeight

                    position -= pageHeight

                    if (height > 0) {

                        PDF.addPage()

                    }

                }

            }

            // 保存 pdf 文档

            PDF.save(`${title}.pdf`)

            resolve(true)

        })

    })

}

<div class="conts" id="resultsHuiZongTableId" style="width:900px;" ></div>


该文章在 2023/8/18 8:37:32 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved