uni-app VUE3 鸿蒙真机的时候html2canvas无法使用的问题

uni-app VUE3 鸿蒙真机的时候html2canvas无法使用的问题

错误信息

{
  "stack": "Error: Failed to execute 'open' on 'Document': Can only call open() on same-origin documents."
}

AI说这是跨域的问题，是鸿蒙对webview的限制比较严重吗，官方有没有在哪里可以配置允许跨域的？

附件

demo.zip


更多关于uni-app VUE3 鸿蒙真机的时候html2canvas无法使用的问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

22 回复

由于鸿蒙对 webview 的限制，目前只有还无法同时兼容 renderjs 跨域和沙箱中 files 文件夹中的 html 的跨域。目前为沙箱中 files 文件夹下的 html 可以跨域。
此问题为已知问题且已反馈给鸿蒙，鸿蒙方预计后续会修复此问题

更多关于uni-app VUE3 鸿蒙真机的时候html2canvas无法使用的问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你提供一下一个完整的可以直接运行的测试项目

佬，这个可以直接运行，就是要替换一下鸿蒙的那个证书吧？

佬怎么样， 有说法吗

回复 阵浊秀: 看一下私信

回复 阵浊秀: 请问后续有解决了嘛？

回复 jyoungvi: 可以私信我一下

回复 阵浊秀: 老铁 怎么解决的 我这边也是这样

回复 9***@qq.com: 私聊

回复 9***@qq.com: 请问后续解决了吗

回复 阵浊秀: 请问后续解决了吗

回复 kemp: 可以私信我一下

回复 DCloud_UNI_yuhe: 麻烦私信一下，给你发私信，但一直没回

定位到html2canvas代码，就是同一个页面下创建 iframe的时候，iframe和原有的页面不同源， 然后调用open方法就出现跨域的问题， 找了一下harmony官方文档，应该是这个原因 但是不知道如何解决


是这个问题，目前还在排查问题

回复 DCloud_UNI_yuhe: 大佬 请问这个问题解决了吗

运行的示例代码如下 {
“dependencies”: {
“html2canvas”: “^1.4.1”
}
}

<template> <view class="content"> <view id="htmlCanvas"> <text>测试文字</text> </view> 
    <button @click="canvasImage.onSaveImage" type="primary" style="margin: 20rpx;">  
        保存  
    </button>  
</view>
</template> <script> export default { data() {}, onLoad() {}, methods: {} } </script> <script module="canvasImage" lang="renderjs"> import html2canvas from "html2canvas" export default { methods: { onSaveImage(e) { const dom = document.getElementById('htmlCanvas') html2canvas(dom, { width: dom.scrollWidth, height: dom.scrollHeight, windowWidth: dom.scrollWidth, scrollY: 0, scrollX: 0, useCORS: true, allowTaint: true, }).then((canvas) => { console.log(canvas) }).catch(e => { // 出错 SecurityError: Failed to execute 'open' on 'Document': Can only call open() on same-origin documents. console.log('error:' + e) }) }, } } </script>

问题已复现

回复 DCloud_UNI_OttoJi: 好的 感谢

你好，请问解决了吗，能否发下解决方法

你好，请问解决了吗，刚遇到这个问题，一直生成不了图片

在 uni-app VUE3 环境下，鸿蒙系统对 WebView 的跨域限制确实比 Android 和 iOS 更严格。html2canvas 在生成截图时需要访问文档内容，鸿蒙系统默认禁止跨域访问，导致 open() 方法调用失败。

解决方案：

  1. 配置鸿蒙 WebView 跨域权限
    在鸿蒙项目的 config.json 中，添加以下配置允许跨域：
    {
  "app": {
    "web": {
      "domStorageEnabled": true,
      "crossOrigin": true
    }
  }
}
回到顶部