html2canvas转pdf失败了?看我怎么做

html2canvas + jspdf 导出pdf失败?看我就对了


前言

作为一名优秀的咸鱼,我本着能不做就不做的原则下"集沙成石",昨天出现了一个不得不解决的bug。

我负责的其中一款项目是面向C端的。通过各种图、文、视频来展示宣传C端的优势,但是有的时候需要通过纸质的内容向C端的领导进行汇报,所以这里就用需要把页面元素转为PDF了。

之前通过`html2canvas`和`jspdf`已经实现了的,但是昨天突然有的人导出就不行了。。。,而且C端还急需向领导汇报。🙀🙀🙀🙀🙀🙀

问题

那能行吗? 作为一名优秀的咸鱼,怎么可以让客户着急呢。 打开客户端调试器一看,错误不就已经出现了吗,那肯定是jsPdf的问题了,更新插件总该行了吧,聪明如我😃😃😃

js 复制代码
Uncaught (in promise) Error: Supplied data is not a JPEG
    at getJpegSizeFromBytes (jsPdf.debug.js:4753:43)
    at jsPDFAPI.processJPEG (jsPdf.debug.js:4801:24)
    at jsPDFAPI.addImage (jsPdf.debug.js:4697:66)

呐~ 你肯定猜到了,更新之后没解决。。。

搞半天才发现这眼睛不好使啊,都明明白白的告诉我Supplied data is not a JPEG数据不是JPEG格式的

继续往上排查结果发现canvas画布在渲染dom页面的时候竟然都是空白的,我emo了...

js 复制代码
  html2canvas(this.dom, {

      backgroundColor: '#fff',

      canvas: c,

      useCORS: true,

    }).then((canvas) => {
         // canvas 竟然没有画面。。。。
         document.body.appendChild(canvas)

    })

方案

  • 排查之后发现之所以导致canvas画布空白,竟然是因为页面过长导致的。
  • 掘金stackoverflow都查看了一下都没有查到我需要的答案
  • 解决方案

最后,我只想到了一个办法,那就是使用canvas.scale方法根据可渲染的最大高度来对canvas进行缩放,降低画面的清晰度

这里需要注意一下在设置canvas的width和height的时候需要考虑当前像素比,不然会出现画面拉伸的问题。

js 复制代码
   /**
   * 创建并配置canvas的参数
   */
  configCanvas = function (h) {
    // 画板dom
    const canvasDom = document.createElement('canvas')
    canvasDom.style.backgroundColor = '#fff'
    canvasDom.style.width = this.fileW + 'px'
    canvasDom.style.height = h + 'px'

    const defaultSize = { // html2canvas的width和height默认需要设置为style.width .height的window.devicePixelRatio倍
      w: this.fileW * window.devicePixelRatio,
      h: h * window.devicePixelRatio
    }

    canvasDom.width = defaultSize.w
    canvasDom.height = defaultSize.h
    if (this.maxHeight < h) {
      // 根据实际高度和最大渲染高度来计算缩放
      domScale.h = Math.min(this.maxHeight / h, 1)
      canvasDom.height = domScale.h * defaultSize.h
    }


    // 画板
    const ctx = canvasDom.getContext('2d')
    ctx.scale(1, domScale.h)
    this.domRenderToCanvas(canvasDom)
  }

传送门:dom2pdf

相关推荐
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L1 小时前
CSS知识复习5
前端·css
许白掰1 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子5 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子6 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4538 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友8 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir8 小时前
vue3.2 前端动态分页算法
前端·算法