vue 前端实现pdf下载.npm install html2canvas jspdf --save

向右看齐 2022-12-24 10:48 144阅读 0赞

npm install html2canvas jspdf --save

// 页面使用
    <div id='pdfDom'>
    ...........
    </div>
    <el-button @click="getPdf('#pdfDom')">下载测试</el-button>

// main.js 文件
    import htmlToPdf from './plugins/utils/htmlToPdf';
    Vue.use(htmlToPdf);

/**
     * 导出页面为PDF格式
     *  */ 
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
        install(Vue, options) {
            Vue.prototype.getPdf = function () {
                var title = this.htmlTitle
                html2Canvas(document.querySelector('#pdfDom'), {
                    allowTaint: true
                }).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')  // 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')
                })
            }
        }
    }