html2Canvas+JsPDF生成pdf文件并下载

最新推荐文章于 2024-09-25 07:44:51 发布

风如白话

最新推荐文章于 2024-09-25 07:44:51 发布

阅读量1.4k

点赞数

分类专栏： vue # html # javascript 文章标签： javascript html5 jspdf html2Canvas

本文链接：https://blog.csdn.net/weixin_43838488/article/details/122337601

版权

javascript 同时被 3 个专栏收录

43 篇文章 1 订阅

订阅专栏

vue

14 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

本文介绍了如何结合html2Canvas和JsPDF库将网页DOM元素转换为PDF文件并进行下载。首先，通过npm安装这两个库，然后在JavaScript中调用html2canvas获取canvas，再将canvas转换为base64图片。接着，利用JsPDF创建PDF文档，设置页面尺寸，将base64图片添加到PDF，并保存为指定文件名。

摘要由CSDN通过智能技术生成

采用html2Canvas+JsPDF实现web页面/dom元素转pdf文件并下载

1、安装html2Canvas:

npm install html2canvas

2、安装JsPDF：

npm install jspdf

/**
 * 生成PDF格式文件并下载
 * @param {*} el 页面元素名
 * @param {*} title 文件名称
 * @returns 
 */
export function generatePdf(el, { title = '' }) {
    return new Promise((resolve) => {
        html2canvas(document.querySelector(el), {
            allowTaint: true,
            scale: 2
        }).then((canvas) => {
            // 得到canvas画布的单位是px 像素单位
            var contentWidth = canvas.width
            var contentHeight = canvas.height

            // 将canvas转为base64图片
            var pageData = canvas.toDataURL('image/jpeg', 1.0)

            // 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
            // 2为上面的scale 缩放了2倍
            var pdfX = (contentWidth + 30) / 2 * 0.75
            var pdfY = (contentHeight + 30) / 2 * 0.75 // 500为底部留白

            // 设置内容图片的尺寸，img是pt单位 
            var imgX = pdfX
            var imgY = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离

            // 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
            let PDF = new JsPDF('', 'pt', [pdfX, pdfY])

            // 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
            PDF.addImage(pageData, 'jpeg', 0, 0, imgX, imgY)
            PDF.save(title + '.pdf')
            resolve()
        })
    })
}