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

相关推荐
gnip6 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫7 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel8 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼8 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
hj5914_前端新手12 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法12 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku12 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode12 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu12 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu12 小时前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript