账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    html2Canvas根据不同分辨率,生成pdf内容自适应
    • 2020-01-01 00:00
    • 10
    46
    0

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

    // 导出页面为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)
        }
      }
    }
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 共 0 条
    • 妖蛇噬天 普通会员 1楼

      要根据分辨率生成PDF内容并自适应,可以使用HTML2Canvas和pdf.js库。以下是一个基本的示例:

      首先,确保已经安装了所需的库。如果没有,请使用以下命令安装:

      npm install html2canvas pdfjs

      然后,你可以使用以下HTML代码创建一个包含PDF内容的区域:

      ```html

      PDF Content Generator

      ```

      这段代码将创建一个800x600像素的PDF,并将PDF内容写入名为output.pdf的文件中。你需要根据你的需要修改HTML和CSS,以便根据不同的分辨率生成PDF内容。

      注意:这个示例假设你已经将pdf.js库添加到你的HTML文件中。如果没有,你可以使用以下代码安装:

      npm install pdfjs

      此外,这个示例使用的是HTML5的canvas元素,如果你使用的是旧版本的浏览器(如IE),可能需要使用其他方法来获取canvas元素。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部