vue + jsPdf+html2canvas导出pdf

main.js

import htmlToPdf from “@/util/htmlToPdf”

Vue.use(htmlToPdf)

htmlToPdf.js

import html2canvas from “html2canvas”
import JsPDF from “jspdf”
/**

  • @param ele要生成 pdf 的DOM元素(容器)

  • @param el_class 不能分割的元素

  • @param pdfFileName PDF文件生成后的文件名字

  • */
    export default {
    install(Vue, options) {
    Vue.prototype.getPdfFromHtml = (ele, el_class, pdfFileName) => {
    //a4纸的尺寸[595.28,841.89],单位像素,html页面生成的canvas在pdf中图片的宽高
    //ele 要导出的容器 el_class标记不能分割的元素 pdfFileName导出的文件名
    let A4_WIDTH = 595.28
    let A4_HEIGHT = 841.89

         function splitPage(dom) {
             const pageOffsetTop = dom.offsetTop
             const pageOffsetWidth = dom.offsetWidth
             const pageOffsetHeight = dom.offsetHeight
             const $unitElements = dom.querySelectorAll('.' + el_class) //标记不能分割的元素
             const peerPageHeight = pageOffsetWidth / A4_WIDTH * A4_HEIGHT // 获取缩放后的一页页面高度
             const pages = []
             // 遍历最小单元格
             // 获取单元格底部距离顶部的高度 top,以及 offsetTop
             // 根据 top 值,算出该单元格的页码,放入数组 pages
             $unitElements.forEach($element => {
                 const offsetTop = $element.offsetTop - pageOffsetTop
                 let pagesIndex = Math.ceil(offsetTop / peerPageHeight)
                 for (let i = 0; i < pagesIndex; i++) {
                     if (typeof pages[i] === 'undefined') {
                         pages[i] = [{
                             offsetTop: peerPageHeight * i,
                             top: peerPageHeight * (i + 1)
                         }]
                     }
                 }
    
                 const top = offsetTop + $element.offsetHeight
                 const pageIndex = Math.ceil(top / peerPageHeight)
    
                 // 新的一页
                 console.log(pagesIndex,12221)
                 if (pageIndex > pagesIndex) {
                     let peerIndex = Math.ceil($element.offsetHeight / peerPageHeight)
                         pages[pagesIndex - 1][0].top=offsetTop
                         for (let i = 0; i < peerIndex; i++) { 
                         pages[pagesIndex + i] = [{
                             top: (offsetTop+peerPageHeight)>pageOffsetHeight?pageOffsetHeight:offsetTop+peerPageHeight,
                             offsetTop: offsetTop
                         }]
                     }
    
                 }
    
             })
             let heightIndex=0
             let index=pages.length
             if(pages.length&&pages[pages.length-1][0].toppageOffsetHeight?pageOffsetHeight:pages[index-1+i][0].top+peerPageHeight,
                     offsetTop: pages[index-1+i][0].top
                 }]
             }
             
             return pages
         }
         let eleW = ele.offsetWidth // 获得该容器的宽
         //   let eleH = ele.offsetHeight // 获得该容器的高
         let eleH = ele.scrollHeight // 获得该容器的高
         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 // 获得滚动条宽度的一半
         }
         canvas.width = eleW * 2 // 将画布宽&&高放大两倍
         canvas.height = eleH * 2
         var context = canvas.getContext("2d")
         context.scale(2, 2) // 增强图片清晰度
         context.translate(-eleOffsetLeft - abs, -eleOffsetTop)
    
    
         html2canvas(ele, {
             dpi: 300,
             useCORS: true //允许canvas画布内可以跨域请求外部链接图片, 允许跨域请求。
         }).then(canvas => {
             var contentWidth = canvas.width
             var contentHeight = canvas.height
             console.log('canvars宽:' + contentWidth + '高:' + contentHeight)
             //一页pdf显示html页面生成的canvas高度;
             var pageHeight = (contentWidth / (A4_WIDTH - 3)) * A4_HEIGHT // 这样写的目的在于保持宽高比例一致 pageHeight/canvas.width = a4纸高度/a4纸宽度// 宽度和canvas.width保持一致
             //未生成pdf的html页面高度
             var leftHeight = contentHeight
             //页面偏移
             var position = 20
             var imgWidth = A4_WIDTH
             var imgHeight = (A4_WIDTH / contentWidth) * contentHeight
             console.log('缩放后图片宽:' + A4_WIDTH + '高:' + imgHeight)
    
             var pageData = canvas.toDataURL("image/jpeg", 1.0)
             var pdf = new JsPDF("", "pt", "a4")
             //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
             let pages = splitPage(ele)
             // console.log(JSON.stringify(pages))
             //当内容未超过pdf一页显示的范围,无需分页
             if (leftHeight < pageHeight - 40) {
                 //在pdf.addImage(pageData, 'JPEG', 左,上,宽度,高度)设置在pdf中显示;
                 pdf.addImage(pageData, 'JPEG', 10, 20, imgWidth - 20, imgHeight - 40);
                 pdf.save(pdfFileName + ".pdf")
             } else if (pages.length > 1) {
                 console.log(pages)
                 pages.forEach((page, index) => {
                     const {
                         offsetTop
                     } = page[0]
                     const {
                         top
                     } = page[page.length - 1]
                     let img = new Image();
                     img.src = pageData;
                     //生成canvas
                     let canvas1 = {}
                     let num = 1
                     // if(index>0){
                     //占一页的高度比
                     num = (top - offsetTop) / ((A4_HEIGHT - 40) / ((A4_WIDTH - 20) / contentWidth))
                     // }
                     canvas1['canvas' + index] = document.createElement('canvas');
                     var ctx = canvas1['canvas' + index].getContext('2d');
                     var createw = document.createAttribute('width');
                     var createh = document.createAttribute('height');
                     createw.nodeValue = contentWidth;
                     createh.nodeValue = top - offsetTop;
                     canvas1['canvas' + index].setAttributeNode(createh);
                     canvas1['canvas' + index].setAttributeNode(createw);
                     img.onload = () => {
                         if (index > 0) {
                             pdf.addPage()
                         }
                         // if(num>1){
    
                         //     let pageHeight=top-offsetTop
                         //     while (pageHeight > 0) {
                         //         tx.drawImage(img, 0, offsetTop, contentWidth, top, 0, 0, contentWidth, top);
                         //         var base64Result = canvas1['canvas' + index].toDataURL("image/jpeg", 1.0)
                         //         pdf.addImage(base64Result, 'JPEG', 10, 20, A4_WIDTH - 20, (A4_HEIGHT-40)*num)
    
                         //         pdf.addImage(pageData, "JPEG", 10, position, imgWidth - 20, imgHeight)
                         //         pageHeight -= pageHeight
                         //         position -= (A4_HEIGHT)
                         //         //避免添加空白页
                         //         if (pageHeight > 0) {
                         //             pdf.addPage()
                         //         }
                         //     }
                         // }else{
                         ctx.drawImage(img, 0, offsetTop, contentWidth, top, 0, 0, contentWidth, top);
                         var base64Result = canvas1['canvas' + index].toDataURL("image/jpeg", 1.0)
                         pdf.addImage(base64Result, 'JPEG', 10, 20, A4_WIDTH - 20, (A4_HEIGHT - 40) * num)
                         // }
                         if (index == pages.length - 1) {
                             pdf.save(pdfFileName + ".pdf")
                         }
                     }
                 })
             } else {
                 // 分页
                 while (leftHeight > 0) {
                     pdf.addImage(pageData, "JPEG", 10, position, imgWidth - 20, imgHeight)
                     leftHeight -= pageHeight
                     position -= (A4_HEIGHT)
                     //避免添加空白页
                     if (leftHeight > 0) {
                         pdf.addPage()
                     }
                 }
                 pdf.save(pdfFileName + ".pdf")
    
             }
    
         })
     }
    

    }
    }

你可能感兴趣的:(js,vue.js)