解决html2canvas 在ios上不能使用的问题

最新推荐文章于 2023-12-07 08:47:31 发布

YAN_wenhao

最新推荐文章于 2023-12-07 08:47:31 发布

阅读量6.8k

点赞数 1

分类专栏：前端学习文章标签： vue js html ios vue.js

本文链接：https://blog.csdn.net/YAN_wenhao/article/details/109101638

版权

前端学习专栏收录该内容

2 篇文章

订阅专栏

在开发中遇到html2canvas在iOS设备上无法使用的状况，经排查发现是版本问题。html2canvas的1.0.0-rc.4以上版本存在与iOS的兼容性问题。解决方法是降级到1.0.0-rc.4，并在vue环境中进行相应的npm操作和代码调整。具体步骤包括卸载高版本插件，重新安装rc.4版本，然后更新代码以确保在new html2canvas时设置正确的配置项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为公司的开发需要，安装了html2canvas插件。
但是坑爹的是，在网页、android上测试正常，在ios上却使用不了。
原因是html2canvas1.0.0-rc.4以上版本不兼容ios。
特此记录下解决的方法：
1.vue环境下运行以下指令：

npm uninstall html2canvas
npm i html2canvas@1.0.0-rc.4;

2.修改程序：

     let that = this
     let ref = this.$refs.result // 截图区域
     console.log('开始截图')
     new html2canvas(ref, {  //关键在于new
       useCORS: true,
       removeContainer: true,
       allowTaint: false,
       width: window.screen.availWidth,
       // height: window.screen.availHeight,
       windowWidth: document.body.scrollWidth,
       // windowHeigt: document.body.scrollHeight,
       x: 0,
       y: 0,
     }).then(canvas => {
       console.log('截图中')
       let dataURL = canvas.toDataURL('image/png')
       that.dataURL = dataURL.replace(/[\r\n]/g, '')
       console.log('dataURL=' + dataURL)
       Toast.clear()
       this.showModel = true
     })