Vue使用html2Canvas导出pdf报Uncaught (in promise) Error: Element is not attached to a Document错误

已于 2023-02-15 10:23:30 修改
阅读量1.4k 收藏
点赞数
分类专栏： vue js element 文章标签： vue.js pdf javascript
于 2023-02-14 11:32:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39548550/article/details/129023691
版权
vue 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
js
13 篇文章 0 订阅
订阅专栏
element
8 篇文章 0 订阅
订阅专栏

2023年02月14日，拖了四天的工资终于发了，立马还信用卡！

今天有个新需求，将页面导出为pdf，于是网上一顿搜索资料，基本上就是使用html2Canvas和jsPDF。话不多所一顿ctrl+c，ctrl+v。保存，运行，结果不出所料~报错。错误如下：

Uncaught (in promise) Error: Element is not attached to a Document

又是一顿搜索报错，又是询问ChatGPT的，最终试了第三种，解决！前两种不行，使用nextTick个setTimeout是无法解决的。只能使用原生获取dom元素

 正确的解决方案：

 

 完美解决，不报错了~

华北周黑鸭
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html2canvas 将html代码转为图片的使用方法
12-13
转换代码到图片使用 html2canvas，这是一个非常著名的从浏览器网页截图的开源库，使用很方便，功能也很强大。 使用 html2canvas         html2canvas 的使用非常简单，简单到只需要传入一个 DOM 元素，然后通过回调拿到 canvas： 在实际使用的时候，有两个注意点：         1.html2canvas 通过解析元素实际的样式来生成 canvas 图片内容，因此它对元素实际的布局和视觉显示有要求。如果要完整截图，最好将元素从文档流中独立出来（例如 position:absolute）         2.默认生成的 canvas 图片在 retin
vue导出pdf ；jsPDF+html2canvas实现前端导出；vue导出滚动条可视化页面以外的整个页面；vue导出pdf有图标表格时自动分页导出；vue完整导出页面；vue导出pdf符号缺失
killerdoubie的博客
12-18 888
导出页面调用：(上文是使用export default暴露的 所以引用就要如下引入；开始我还是用{}方式引入 报错PdfLoader不是一个构造函数？export --->import {import PdfLoader } ---表示这个有多个方法或者变量、对象。export default---->import PdfLoader --- 表示这个模块只要一个。二、封装导出构造函数。
jQuery配合html2canvas 使用时 报错 Uncaught (in promise) Provided element is not within a Document...
weixin_30768661的博客
04-25 4255
报错代码： 这个函数运行时 function download(){ var element = $("#demo"); //jquery 获取元素 //这里将会报错 html2canvas(element).then( (canvas)=>{ }) } 报错：Uncaught (in promise)...
html2pdf vue,vue+html2canvas 生成pdf报错
weixin_29708043的博客
07-03 441
最近在使用html2canvas 生成pdf时，其中背景图是根据后台返回路径而动态生成的，背景图片无法显示，而图片地址在浏览器中是可以打开显示出来的！报错信息js代码import html2Canvas from 'html2canvas'import JsPDF from 'jspdf'export default {install(Vue, options) {Vue.prototype.$g...
vue 导出 pdf jspdf + html2canvas 报错 Supplied Data is not a valid base64-String jsPDF
qq_39086076的博客
11-22 6094
解决办法： 如图 看下 canvas打印出来数据 看下宽和高是否都存在 我就是因为宽不存在 所以报错 然后设置好宽和高就没问题了
html2canvas使用中报 Error: Element is not attached to a Document
weixin_39818813的博客
08-08 2万+
需要注意的是： 绘图要选择的dom元素必须是原生元素， 不能使用ui库元素,如用iview中的< Content >就会报错。Error: Element is not attached to a Document。 下面代码可以看到，绘图的元素this.$refs.imgTransf指向的是div元素，这样是没有问题的， <img class="co...
关于 vue 中使用html2canvas 遇到报错（ Element is not attached to a Document）
qq_44726587的博客
08-05 6135
关于 vue 中使用html2canvas 遇到报错（ Element is not attached to a Document）
element is not attached to the page document报错解决办法
weixin_44909045的博客
10-19 936
element is not attached to the page document报错解决办法
通过 html2canvas对video视频点击按钮进行截取视频图片，获取base64图片
@必意玲
03-22 4346
1.对播放视频进行截取图片演示 2. npm安装 html2canvas 或者直接下载html2canvas.js引用都可以 2.1 npm安装 cnpm i html2canvas 2.2 直接下载引用js包 html2canvas.js下载 3. 完整代码 <template> <view> <view> <video id="myVideo" src="/static/video.mp4" ref="localVideo" :muted="
【前端异常】JavaScript错误处理：分析 Uncaught(in promise) error
热门推荐
No8g攻城狮的博客
11-13 3万+
Uncaught(in promise) error 表示一个Promise被rejected且未处理。});在上面示例中，创建了一个Promise并使用reject方法将其状态设置为rejected。但是，没有在后续代码中处理这个错误，此时就会导致 Uncaught(in promise) error。
vue 使用html2canvas将DOM转化为图片的方法
10-18
主要介绍了vue 使用html2canvas将DOM转化为图片的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue实现pdf导出解决生成canvas模糊等问题(推荐)
11-29
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？ 1 、我们要添加两个模块 1 第一个.将页面html转换成图片 2 npm install –save html2canvas 3 第二个.将...
Error in mounted hook: "ReferenceError: AMap is not defined" fo
06-13
ReferenceError: AMap is not defined AMap未定义
vue-html2pdf:vue-html2pdf可将任何vue组件或元素转换为PDF，vue-html2pdf基本上仅是vue包装器，并且在后台使用html2pdf.js
05-07
vue-html2pdf将任何vue组件或元素转换为PDF，vue-html2pdf基本上只是一个vue包装器，在后台使用 。 目录 。 在Nuxt.js中使用 道具 大事记@beforeDownload的示例用例 投币口 分页符 指导 浏览器 入门 NPM 使用...
如何处理“element is not attached to the page document”爬虫异常
jbluxun的博客
07-22 1953
本人在爬某网站时，网站有一个特殊设计，即在当前页面点击按钮刷新内容。当我爬取其中内容时，总是碰到这个错误： StaleElementReferenceException('stale element reference: element is not attached to the page document (Session info: chrome=90.0.4430.212)', None, None) 使用WebDr...
vue中使用html2canvas配合jspdf导出pdf（以及在导出时遇到的导出样式问题）
最新发布
Zeng的博客
01-31 563
vue中使用html2canvas配合jspdf导出pdf（以及在导出时遇到的导出样式问题）
解决安装jspdf和html2canvas报错问题，和实现HTML转pdf全过程
vue6214的博客
04-21 1280
报错export 'default' (imported as '_defineProperty') was not found in '@babel/runtime/helpers/defineProperty' (module has no exports)版本问题，我用的vue2，安装以下版本。
“element is not attached to the page document“报错解决
weixin_45754647的博客
07-12 4432
在元素定位正确的前提下，页面报这个错说明是没有找到这个元素，加一个显示等待，直到元素可见再进行点击，这样就可以完美解决这个问题 from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.common.by impo
vue3+cli+vue-pdf 使用报错Uncaught (in promise) TypeError: h is not a function
06-08
这个错误通常是因为在使用 `vue-pdf` 时，没有正确引入 `h` 函数。`h` 函数是 Vue 3 中用于创建虚拟节点的函数。 你可以尝试在组件的 `script` 标签中添加以下代码： ```javascript import { h } from 'vue' export default { // ... render() { return h('vue-pdf', { // ... }) } } ``` 另外，你需要确保已经正确安装了 `vue-pdf`，并且在组件中正确引入了它： ```javascript import VuePdf from 'vue-pdf' ``` 希望这些信息能够帮助到你解决问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值