html2canvas+jspdf实现前端导出pdf时,4k屏浏览器卡死

文章讨论了在高分辨率屏幕上使用前端技术导出PDF时,不同浏览器对canvas元素尺寸的限制。提出通过调整像素比和使用HTML2Canvas库来解决问题,但推荐前后端文件流方式导出作为最佳实践。
摘要由CSDN通过智能技术生成

问题概述:在4k屏上进行前端导出pdf,谷歌浏览器卡死,在笔记本电脑上能正常导出

问题分析:由于canvas画布在主流浏览器中的尺寸限制

在IOS10下,自带浏览器和微信下,超过40964096像素则显示不了红色方块;
HUAWEI NXT-TL00手机自带浏览器和UC浏览器下,不能超过81928192像素;
在PC,CHROME浏览器,360浏览器,不能超过1638416384像素;
搜狗浏览器,要比1638416384稍微小一些;
firefox,最大数在11164*11164左右;
IE11、EDGE浏览器,没找到极限,只不过越大电脑越慢内存消耗严重;

解决方案:像素比调小,降低清晰度window.devicePixelRatio * 1,默认window.devicePixelRatio * 1

/**
   * 将元素转化为canvas元素
   * @param {HTMLElement} element - 当前要转换的元素
   * @param {width} width - 内容宽度
   * @returns
   */
  async toCanvas(element, width) {
    // canvas元素
    let canvas = await html2canvas(element, {
      allowTaint: true, // 允许渲染跨域图片
      scale: this.scale || window.devicePixelRatio * 1, // 增加清晰度
      useCORS: true, // 允许跨域
    });
    // 获取canvas转化后的宽度
    const canvasWidth = canvas.width;
    // 获取canvas转化后的高度
    const canvasHeight = canvas.height;
    // 高度转化为PDF的高度
    const height = (width / canvasWidth) * canvasHeight;
    // 转化成图片Data
    const canvasData = canvas.toDataURL("image/jpeg", 1.0);
    // 释放canvas
    canvas = null;
    //console.log(canvasData)
    return { width, height, data: canvasData };
  }

这种也是没有办法的办法,一般情况下最好前后端使用文件流的方式导出最合适!!!

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

麦兜_冰夕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值