html2Canvas根据不同分辨率,生成pdf内容自适应

根据屏幕大小不同,页面内容自适应并一页展示,应该如何实现

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
    install (Vue, options) {
    Vue.prototype.getPdf = function () {
      setTimeout(() => {
        var title = this.htmlTitle
        let pdfDom_html = document.getElementsByClassName('pdfDom')
        let PDF = new JsPDF('', 'pt', 'a4')
        var imgArr = new Array();
        let scale = 2 //获取像素密度的方法 (也可以采用自定义缩放比例)
        for(var i = 0; i< pdfDom_html.length; i++) {
          html2Canvas(pdfDom_html[i], {
            useCORS: true,//允许加载跨域的图片
            allowTaint: true,//允许跨域图片
            scale: scale // 添加的scale 参数
          }).then(function (canvas) {
            let contentWidth = canvas.width
            console.log(contentWidth, 'contentWidth')
            let contentHeight = canvas.height
            console.log(contentHeight, 'contentHeight')
            //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            let imgWidth = 595.28
            let imgHeight = (592.28 / contentWidth * contentHeight)
            console.log(imgHeight, 'imgHeight')
            //返回图片dataURL,参数:图片格式和清晰度(0-1)
            // let pageData = canvas.toDataURL('image/png', 1.0)
            var pageData = new Image();
            pageData.src = canvas.toDataURL('image/jpeg', 1.0);
            imgArr.push(pageData)
            if (imgArr.length == pdfDom_html.length) {
              for(var j = 0; j < imgArr.length; j++) {
                PDF.addImage(imgArr[j].src, 'JPEG', 0, 0, imgWidth, imgHeight)
                if (j < imgArr.length - 1) {
                  PDF.addPage()
                }
              }
              PDF.save(title + '.pdf')
            }
          })
        }
      }, 100)
    }
  }
}
阅读 6.7k
2 个回答

页面上有好几个pdfDom_html,你想截取到一张图里?
html2canvas里放的dom对象可以是pdfDom_html父级,父级包括了所有的pdf。这个截取出来的图是否就可以了呢

新手上路,请多包涵

为什么我生成的pdf全是空白页

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏