vue脚手架导出pdf文件,注:导出文件内容过小时,可自行设置字体大小及dom元素大小

最新推荐文章于 2025-06-23 10:26:49 发布

那一抹绕指的温柔

最新推荐文章于 2025-06-23 10:26:49 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： SmallDemo

本文链接：https://blog.youkuaiyun.com/weixin_45076562/article/details/99067073

SmallDemo 专栏收录该内容

8 篇文章

订阅专栏

本文介绍如何利用html2canvas和jsPDF库将HTML页面转换为PDF文件。通过npm安装这两个库，创建并引入htmlToPdf.js模块，实现页面元素到PDF的导出。方法包括设置画布参数，调整页面布局，以及处理多页情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一:npm下载两个包


npm install --save html2canvas
npm install jspdf --save

二:创建一个公共htmlToPdf.js文件引入main.js中

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
    install(Vue, options) {
        Vue.prototype.getPdf = function(idStr, title) {
            html2Canvas(document.querySelector('#' + idStr), {
                // allowTaint: true,
                useCORS: true
            }).then(function(canvas) {
                let contentWidth = canvas.width
                let contentHeight = canvas.height
                //一页pdf显示html页面生成的canvas高度;
                let pageHeight = contentWidth / 592.28 * 841.89
                //生成pdf的html页面高度
                let leftHeight = contentHeight
                //页面偏移
                let position = 0
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                let imgWidth = 595.28
                let imgHeight = 592.28 / contentWidth * contentHeight
                // canvas.crossOrigin="anonymous";
                let pageData = canvas.toDataURL('image/jpeg', 1.0);
 
                let PDF = new JsPDF('', 'pt', 'a4')
                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                } else {
                    while (leftHeight > 0) {
                        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                        leftHeight -= pageHeight
                        position -= 841.89
                        if (leftHeight > 0) {
                            //避免添加空白页
                            PDF.addPage()
                        }
                    }
                }
                PDF.save(title + '.pdf')
            })
        }
    }
}

三:在main.js引入htmlToPdf.js文件

import htmlToPdf from './htmlToPdf.js' //注意路径
Vue.use(htmlToPdf)

四:js代码


methods: {
 exportFile() {
      this.getPdf("pdfDom", "文件名字");
    }
 }

四:在template中调用方法

<div id="pdfDom"">
	//给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<button type="button" v-on:click="exportFile()">导出PDF文件</button>

欢迎留言讨论