js实现导出页面成图片/PDF

qq_42373684

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2026-05-09 11:14:09 发布 1.4k 阅读 AI 写同款· GEO 优化 ›

jsPDF + html2canvas A4分页截断完美解决方案（含代码 + 案例）整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问阅读详情

安装

npm install html2canvas --save

npm install jspdf --save

导入

import html2canvas from 'html2canvas';

import JsPDF from 'jspdf'

导出图片

将要导出的部分限制一下，后面附带一个a标签
```
<div class="..." ref="imageDom" id="imageDom" style="height: auto">
<a href="" download="报表.png" id="download"></a>
```
注：height: auto为必须，这样才能导出完整的，不仅是能看到的页面部分

导出方法

savecanvas() {
    html2canvas(this.$refs.imageDom, {
        allowTaint: true,
        taintTest: false,
        height: $('#imageDom').outerHeight()
    }).then(canvas => {
        let imgUri = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
        $('#download').attr('href', imgUri);
        document.getElementById('download').click();
    });
},

导出pdf

封装成一个公共文件

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default {
    install(Vue, options) {
        Vue.prototype.getPdf = function (pdfTitle) {
            var title = pdfTitle
            html2Canvas(document.querySelector('#imageDom'), {
                allowTaint: true,
                taintTest: false,
                height: $('#imageDom').outerHeight()
            }).then(function (canvas) {
                    let contentWidth = canvas.width
                    let contentHeight = canvas.height
                    let pageHeight = contentWidth / 592.28 * 841.89
                    let leftHeight = contentHeight
                    let position = 0
                    let imgWidth = 595.28
                    let imgHeight = 592.28 / contentWidth * contentHeight
                    let pageData = canvas.toDataURL('image/jpeg', 1.0)
                    let PDF = new JsPDF('', 'pt', 'a4')
                    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')
                }
            )
        }
    }
}

调用

<Button  type="primary" @click="getPdf('报表')">导出PDF</Button>

收录于

前端

vue

标签

#js #html #canvas

【解决】jsPDF之长图片生成PDF 虽然我个人也经常自嘲，十年之后要去成为外卖专员，但实际上依靠自身的努力，是能够减少三十五岁之后的焦虑的，毕竟好的架构师并不多。架构师，是我们大部分技术人的职业目标，一名好的架构师来源于机遇(公司)、个人努力(吃得苦、肯钻研)、天分(真的热爱)的三者协作的结果，实践+机遇+努力才能助你成为优秀的架构师。如果你也想成为一名好的架构师，那或许这份Java成长笔记你需要阅读阅读，希望能够对你的职业发展有所帮助。阅读详情

js实现导出页面成图片/PDF

相关推荐