VUE页面导出PDF踩坑指南

已于 2023-08-25 14:30:14 修改
阅读量2.1k 收藏 6
点赞数 2
分类专栏： 疑难杂症 文章标签： vue.js pdf 前端
于 2023-08-11 16:01:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LGEC_/article/details/132224198
版权

文章目录

一、VUE导出PDF中遇到的问题总结

导出方案用的是html2canvas+jspdf，简单的导出很容易实现，但是也会有一些问题：
一是不同分辨率下导出内容不同的问题，这个需要固定导出内容的宽度；
二是会遇到页面内容被切割的问题，因为导出原理是先使用html2canvas将DOM元素转换为canvas，再利用 canvas 的 toDataURL 方法输出为图片，之后使用jspdf添加图片生成PDF。图片生成PDF过程中必然用统一的格式切割图片分页，所以内容很容易被切割；
三是导出内容过多时，会导出失败只生成空白页，因为内容过多，超出了canvas的 toDataURL 方法的处理范围。

二、基础版的VUE导出PDF（也是所有导出方案的基础）
1、引入两个依赖
npm i html2canvas 
npm i jspdf
2、在utils文件夹下新建htmlToPdf.js文件
/* eslint-disable */
//不使用JQuery版的
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  padfName     PDF文件生成后的文件名字
 * */

 export function downloadPDF(ele, pdfName){
   

    let eleW = ele.offsetWidth;// 获得该容器的宽
    let eleH = ele.offsetHeight;// 获得该容器的高
    let eleOffsetTop = ele.offsetTop;  // 获得该容器到文档顶部的距离
    let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离

    var canvas = document.createElement("canvas");
    var abs = 0;

    let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
    let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）

    if(win_out>win_in){
   
        // abs = (win_o - win_i)/2;    // 获得滚动条长度的一半
        abs = (win_out - win_in)/2;    // 获得滚动条宽度的一半
        // console.log(a, '新abs');
    }
    canvas.width = eleW * 2;    // 将画布宽&&高放大两倍
    canvas.height = eleH * 2;

    var context = canvas.getContext("2d");
    context.scale(2, 2);
    context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
    // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
    // translate的时候，要把这个差值去掉

    html2canvas( ele, {
   
        dpi: 300,
        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    } ).then( (canvas)=>{
   
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 595.28/contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new JsPDF('', 'pt', 'a4');
        //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
        //当内容未超过pdf一页显示的范围，无需分页
        if (leftHeight < pageHeight) {
   
            //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
            // pdf.addImage(pageData, 'JPEG', 20, 40, 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(pdfName);
    })
}
3、使用方法如下：
<template>
    <div class="app-container">
        <div class="main-wrap">
            <div class="export-main">
                <el-button type="primary" @click="exportPdf">导出</el-button>
                <div class="export-wrap">
                    <div id="pdfBox">
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                        <div class="pdf-content"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {
    downloadPDF } from '@/utils/htmlToPdf';
export default {
   
    data() {
   
        return {
   

        };
    },
    methods: {
   
        exportPdf() {
   
            const ele = document.querySelector('#pdfBox');
            downloadPDF(ele, 'pdf');
        }

    }
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';
    .export-main {
   
        .export-wrap {
   
            overflow: auto;
            max-height: calc((100vh - 1rem) - 40px);;
            @include scrollBarNone;
            #pdfBox {
   
                padding: 0 20px;
                width: 1080px;
                margin: 0 auto;
                overflow: hidden;
                .pdf-content {
   
                    width: 100%;
                    height: 300px;
                    margin-top: 20px;
                    background-color: #065cad;
                }
            }
        }
    }
</style>

因为导出DOM设置了宽度 width: 1080px; ，所以不论哪个分辨率下导出内容都如下图所示，也就解决了第一个问题。

在这里插入图片描述

二、内容被分割问题
1、简单内容时，解决导出内容分割问题

在上图中可以清晰的看到蓝色方块有的被分割了。所有导出元素都需要添加上相同的class，如pdf-content这种，之后就可以判断截断时在截断内容头部添加等高空白内容即可。解决方案如下：

（1）在utils文件夹下新建htmlToPdf2.js文件
/* eslint-disable */
//不使用JQuery版的
import html2canvas from 'html2canvas';
import JsPDF from 'jspdf';

/**
 * @param  ele          要生成 pdf 的DOM元素（容器）
 * @param  item         不分割的DOM内容class
 * @param  padfName     PDF文件生成后的文件名字
 * */
function isSplit(nodes, index, pageHeight) {
   
    // 计算当前这块dom是否跨越了a4大小，以此分割
    return !!(nodes[index].offsetTop + nodes[index].offsetHeight < pageHeight && nodes[index + 1] && nodes[index + 1].offsetTop + nodes[index + 1].offsetHeight > pageHeight);
}
 export function downloadPDF(ele, item, pdfName){
   
    // 获取分割dom，此处为class类名为item的dom
    const lableListID = document.getElementsByClassName(item);
    // console.log(lableListID);
    // const pageHeight = ele.scrollWidth / 841.89 * 595.28;// (横版pdf)
    const pageHeight = ele.scrollWidth / 595.28 * 841.89;
    // 进行分割操作，当dom内容已超出a4的高度，则将该dom前插入一个空dom，把他挤下去，分割
    for (let i = 0; i < lableListID.length; i++) {
   
        const multiple = Math.ceil((lableListID[i].offsetTop + lableListID[i].offsetHeight) / pageHeight);
        if (isSplit(lableListID, i, multiple * pageHeight)) {
   
            const divParent = lableListID[i].parentNode; // 获取该div的父节点
            const newNode = document.createElement('div');
            newNode.className = 'emptyDiv';
            newNode.style.background = '#ffffff';
            const _H = multiple * pageHeight - (lableListID[i].offsetTop + lableListID[i].offsetHeight);
            newNode.style.height = _H + 60 + 'px';
            newNode.style.width = '100%';
            const next = lableListID[i].nextSibling; // 获取div的下一个兄弟节点
            // 判断兄弟节点是否存在
            // console.log(next);
            if (next) {
   
                // 存在则将新节点插入到div的下一个兄弟节点之前，即div之后
                divParent.insertBefore(newNode, next);
            } else {
   
                // 不存在则直接添加到最后,appendChild默认添加到divParent的最后
                divParent.appendChild(newNode);
            }
        }
    }

    html2canvas(ele, {
   
        dpi: 300,
        // allowTaint: true,  //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
        useCORS:true  //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
    }).then((canvas) => {
   
        const contentWidth = canvas.width;
        const contentHeight = canvas.height;
        const pageHeight = contentWidth / 595.28 * 841.89 // 一页pdf显示html页面生成的canvas高度;
        // const pageHeight = contentWidth / 841.89 * 595.28; // 一页pdf显示html页面生成的canvas高度(横版pdf);
        let leftHeight = contentHeight; // 未生成pdf的html页面高度
        let position = 0; // pdf页面偏移

        // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
        // let imgWidth = 595.28
        let imgWidth = 595.28  //宽度
        let imgHeight = 595.28 / contentWidth * contentHeight
        // const imgWidth = 841.89; // 宽度（横版pdf）
        // const imgHeight = 841.89 / contentWidth * contentHeight;// （横版pdf）
        const pageData = canvas.toDataURL('image/jpeg', 1.0);
        const pdf = new JsPDF('', 'pt', 'a4');
        if (leftHeight < pageHeight) {
   
            pdf
最低0.47元/天 解锁文章
LGEC
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue将页面导出为图片或者PDF
10-16
主要为大家详细介绍了Vue导出页面为PDF格式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现pdf导出解决生成canvas模糊等问题(推荐)
11-29
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？ 1  、我们要添加两个模块 1 第一个.将页面html转换成图片 2 npm install –save html2canvas 3 第二个.将图片生成pdf 4 npm install jspdf –save 2 、定义全局函数 .. 创建一个htmlToPdf .js 文件在指定位置 . 我个人习惯放在 ( ‘ src /utils/htmlToPdf’ ) // 导出页面为PDF格式 import html2Canvas from 'html2canvas' import
vue中前端不使用后端接口，导出pdf文件
最新发布
......
05-22 242
【代码】vue中前端不使用后端接口，导出pdf文件。
Vue导出PDF
qq_46199553的博客
11-19 6982
使用时, 将要转PDF的内容包裹在一个div里面, 给这个div加一个ref属性,绑定一个方法通过原型调用。所以: 转换后的PDF是图片PDF, 是不能编辑的,而且: 清晰度很一般。其原理是把HTML转化为base64图片, 然后将其转为PDF。refs[‘content’], ‘我的文件’)
vue导出pdf
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
04-12 3592
一文读懂vue导出pdf
Vue中如何进行文件打印与PDF导出
Java徐师兄的博客
06-15 6330
在Vue应用中，可以通过浏览器提供的方法实现文件打印的功能，也可以通过第三方库如jsPDF和pdfmake实现PDF导出的功能。需要根据具体的需求选择合适的方法和库，并进行相应的调整和配置，以确保输出的文件符合用户的需求。
Vue页面生成PDF的最佳方法推荐
lishuaihao的博客
08-10 8219
最近项目有个需求，将系统统计的数据生成分析报告，然后可以导出成PDF。这种方法可以有两种，一种是直接调用打印，用户通过浏览器提供的打印页面手动选择导出PDF。当然这种方式兼容性差，且体验不好，显然不是我们想要的效果。那么第二种方法的实现思路是什么呢？首先生成报告页面，也就是常规页面；然后将页面转换成图片（ 用到的组件 html2canvas ）；最后将图片导出成PDF（ 用到的组件 jspdf ）。...
Vue导出页面为PDF格式的实现思路
10-18
主要介绍了Vue导出页面为PDF格式的实现思路，其实思路也很简单，就是将页面转换成图片格式.然后通过图片的base64码.生成PDF..感兴趣的朋友跟随脚本之家小编一起看看吧
Vue如何将页面导出成PDF文件
10-14
在这个插件中，你需要导入`html2Canvas`和`JsPDF`，并定义一个Vue实例方法来处理PDF导出。例如： ```javascript import html2Canvas from 'html2canvas'; import JsPDF from 'jspdf'; export default { ...
vue实现生成pdf文件
weixin_46182770的博客
12-29 6889
2 接着就是第一个方法exportReport，也就是按钮触发的方法，这个方法里面很简单，就获取了pdfDom这个盒子的dom对象，然后调用生成pdf的方法outPutPdfFn。至此一个简单的生成pdf功能就实现了，上述的方法基本都封装好了，使用上述的3个方法，只需要自己对需要生成pdf内容的盒子进行id的添加，将方法带入就可以了。1 首先template部分就是，给你要到处pdf内容的部分加上一个id标识，用于获取这个盒子的dom对象，如图我这里的id是pdfDom。
vue生成pdf文件以及pdf分页隔断处理
qq_44962364的博客
08-09 6853
【代码】vue生成pdf文件以及pdf分页隔断处理。
vue页面导出为pdf文件
weixin_45907435的博客
03-13 1795
在后台管理项目中，想到把页面导出为pdf格式的文件，可以使用html2canvas和jspdf 插件实现。
VUE页面导出PDF方案
灰太狼-铜豌豆的博客
11-09 2110
1，技术方案为：html2canvas把页面生成canvas图片，再通过jspdf生成PDF文件；
vue导出横版pdf并解决内容分割问题
Anlittlecat的博客
01-04 3011
vue导出横版pdf并解决内容分割问题
关于vue 导出PDF文件 不被分割的问题 总结
u013100927的专栏
05-31 1142
【代码】关于vue 导出PDF文件 不被分割的问题 总结。
在vue项目中将数据导出为pdf
qq_51721168的博客
07-11 911
el-button @click="exportDataToPDF">导出</el-button>// 获取要导出为PDF的元素（此处假设我们要导出整个页面）// 使用html2canvas将元素转换为canvas对象// 创建PDF实例// 将canvas画布作为图像添加到PDF// 导出PDF文件});这是完整代码<template><el-button @click="exportDataToPDF">导出</el-button>
vue页面前端导出pdf
04-04
可以使用jsPDF库来生成PDF文件。首先需要在项目中安装jsPDF库： ``` npm install jspdf --save ``` 然后在需要生成PDF的组件中引入jsPDF： ```javascript import jsPDF from 'jspdf' ``` 接下来可以在组件中定义一个方法来生成PDF文件： ```javascript export default { methods: { generatePdf() { const doc = new jsPDF() doc.text('Hello world!', 10, 10) doc.save('example.pdf') } } } ``` 这个方法中创建了一个新的jsPDF实例，使用`doc.text()`方法向PDF文件中添加文本，最后使用`doc.save()`方法将生成的PDF文件保存到本地。可以在需要的地方调用这个方法来生成PDF文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值