前端实现pdf导出

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

SAG1027

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

阅读量1.4k

点赞数 1

文章标签： pdf vue.js 前端

本文链接：https://blog.csdn.net/SAG1027/article/details/128675101

版权

该文章介绍了如何在Vue项目中利用html2canvas和jspdf库将网页内容转化为图片并进一步生成PDF文件。首先，需要安装这两个依赖，然后在应用页面导入并设置导出按钮。当点击导出按钮时，选取特定区域进行截图，处理跨域问题后，将图片转换为PDF并保存。

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

1.提前准备插件html2canvas和jspdf，若无转PDF需求只下载html2canvas即可。并在应用页面引入。

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


//下载完成后在应用页面进行引用。
import html2canvas from "html2canvas";
import jspdf from "jspdf";

2.导出按钮,并设定导出区域

<el-button
                class="button-upload"
                size="mini"
                title="生成图片"
                type="success"
                @click="toPdf()"
                icon="el-icon-upload el-icon--right">导出报告</el-button>

//导出区域
<div class="content" ref="contentBox">
    //代码内容
</div>

3.啥也不说了，都在代码里了。

  toPdf(){
      const ref = this.$refs.contentBox // 截图区域
          html2canvas(ref, {
            useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
          }).then((canvas) => {
            const dataURL = canvas.toDataURL('image/png')
            //此处为导出图片方式
             // const creatDom = document.createElement('a')
            // document.body.appendChild(creatDom)
            // creatDom.href = dataURL
            // creatDom.download = '图片'
            // creatDom.click()



            //将图片转换为pdf文件
            var pdf = new jspdf('','pt','a4')
            var contentWidth = canvas.width;
             //未生成pdf的html页面高度
            var leftHeight = ref.scrollHeight;
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //页面偏移
            var position = 0;
            while(leftHeight > 0 ){
              pdf.addImage(dataURL,"JPEG",0 ,position, 595.28, 841.89)
              leftHeight -= pageHeight;
              position -= 841.89;
                //避免添加空白页
                if(leftHeight > 0) {
                    // pdf.addPage();
                }
            }
            pdf.save("健康评估报告")//导出及文档名称
           
          })
    },