vue html2canvas 将html转图片时遇到的问题解决

问题1:

场景为将富文本组件tinymce里的html内容转为图片,出现的问题是vue获取不到tinymce元素,无法直接使用html2canvas

解决1:

将富文本内容渲染出来,推荐做法是将提交按钮改为预览按钮,然后在另外的弹框中渲染出富文本内容,如图formData.details是富文本中的内容

<el-button v-if="!showInfo" type="primary" @click="showPreview = true">预 览</el-button><el-dialog :visible="showPreview" width="1250px" @close="showPreview = false" ><div ref="canvas" v-html="formData.details"></div><div style="text-align: center"><el-button @click="showPreview = false">返 回</el-button><el-button v-if="!showInfo" type="primary" @click="handleSubmit">提 交</el-button></div>
</el-dialog>

问题2:

将富文本的html转为图片后,富文本中的图片缺失(主要是跨域引起)

解决2:

1. 富文本中的img标签中增加属性 crossOrigin="anonymous";经测试,没有该属性也是可以的

2. html2canvas增加配置useCORS:true;

3. 后端跨域配置;

async htmlToImage(){const element = this.$refs.canvasvar _html2canvas = await html2canvas(element, { useCORS: true })this.formData.base64 = _html2canvas.toDataURL('image/png')console.log(this.formData.base64)
},

注意:VUE记得安装html2canvas,npm install html2canvas -save

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/38512.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

“一带一路”再奏强音!秘鲁总统博鲁阿尔特参访苏州金龙

6月27日下午&#xff0c;首次访华的秘鲁共和国总统博鲁阿尔特一行到苏州金龙参观访问&#xff0c;受到了苏州金龙总经理黄书平的热情接待。 黄书平&#xff08;左二&#xff09;向博鲁阿尔特&#xff08;右一&#xff09;介绍苏州金龙发展情况 从苏州金龙发展历程、产品技术研…

Python中的爬虫实战:百度知道爬虫

python作为一种强大的编程语言&#xff0c;可以帮助我们更便捷地获取互联网上的大量数据。其中&#xff0c;爬虫技术是极具代表性的一部分。爬虫可以在互联网上获取各种数据并进行分析&#xff0c;为我们提供大量的有价值的信息。在python中&#xff0c;爬虫技术也能够得到广泛…

使用Nginx反向代理KKFileView遇到问题

使用KKFileView 4.0 以上版本 在KKFileView官网上&#xff0c;关于使用Nginx代理&#xff0c;建议配置如下 一、修改Nacos 在Nginx的conf文件夹中修改 nginx.conf ,新加 红框内的IP地址为代理服务器地址&#xff08;即安装KKFileView的服务器地址&#xff09; 二、修改KKFil…

小程序打包

一、manifest.json文件添加小程序id 二、接口校验&#xff0c;后端接口添加正式上线&#xff0c;有域名的地址 然后到微信公众平台-开发管理-服务器域名处配置request合法域名&#xff0c;在 此处能够看到后端的baseUrl 三、项目部署 四、发版 在小程序编辑器里 此处可以在…

Android Studio 2023版本切换DNK版本

选择自己需要的版本下载 根目录下的配置路劲注意切换 build.gradle文件下的ndkVersion也要配好对应版本

数据可视化宝典:Jupyter Notebook与Matplotlib的完美融合

数据可视化宝典&#xff1a;Jupyter Notebook与Matplotlib的完美融合 在数据科学的世界里&#xff0c;数据可视化是一种艺术&#xff0c;它能够将复杂的数据转换为直观的图形&#xff0c;让洞察变得触手可及。Jupyter Notebook是一个强大的工具&#xff0c;它支持多种编程语言…

Postman接口测试工具的原理及应用详解(五)

本系列文章简介&#xff1a; 在当今软件开发的世界中&#xff0c;接口测试作为保证软件质量的重要一环&#xff0c;其重要性不言而喻。随着前后端分离开发模式的普及&#xff0c;接口测试已成为连接前后端开发的桥梁&#xff0c;确保前后端之间的数据交互准确无误。在这样的背景…

Parade接口芯片选型和应用,点击查看!

01 常见数据 / 媒体接口电路 接口电路是电子设备之间&#xff0c;电子设备与外围设备之间&#xff0c;电子设备内部部件之间起连接作用的逻辑电路&#xff0c;接口电路是设备处理器与外部设备进行信息交互的桥梁。 图1&#xff1a;常见高速数据/多媒体接口 1.1 USB接口 从最早…

代谢组数据分析十:偏相关分析

欢迎大家关注全网生信学习者系列: WX公zhong号:生信学习者Xiao hong书:生信学习者知hu:生信学习者CDSN:生信学习者2介绍 偏相关分析是一种统计方法,用于在控制一个或多个其他变量的影响下,分析两个变量之间的相关性。当研究者想要了解两个变量之间的内在联系,但又担心…

详细配置SQL Server的链接服务器(图文操作Mysql数据库)

目录 前言1. MySQL ODBC 驱动2. 配置 SQL Server 链接服务器3. 彩蛋前言 此处配置以及安装没有什么理论知识 所以直奔主题,跟着以下步骤配置安装即可 需求:准备在10.197.0.110中链接外部的10.197.0.96的mysql数据源 已默认在10.197.0.96中安装了MySQL数据库并且知道其连接信…

PPT中的文字跟随Excel动态变化,且保留文字格式

今天协助客户解决了一个有趣的问题&#xff0c;这里记录一下&#xff0c;以此共勉。 目录 1. 提出问题2. 此功能的应用场景3. 开始制作4. 注意事项5. 若遇到任何问题 1. 提出问题 PPT的图表是可以引用Excel的&#xff0c;那PPT的文本是否可以引用Excel实现动态更新呢&#xff…

MWCSH 2024丨美格智能亮相上海世界移动通信大会,加速5G+AIoT应用进程

6月26日—28日全球通信领域最具规模和影响力的通信盛事—2024MWC上海世界移动通信大会在上海新国际博览中心隆重举行。MWC上海是亚洲连接生态系统的风向标&#xff0c;本届大会以“未来先行&#xff08;Future First&#xff09;”为主题&#xff0c;聚焦“超越5G”“人工智能经…

Quectel EM05-CE 模块测试

作者简介&#xff1a; 一个平凡而乐于分享的小比特&#xff0c;中南民族大学通信工程专业研究生在读&#xff0c;研究方向无线联邦学习 擅长领域&#xff1a;驱动开发&#xff0c;嵌入式软件开发&#xff0c;BSP开发 作者主页&#xff1a;一个平凡而乐于分享的小比特的个人主页…

HarmonyOS开发实战:加密类组件使用方法-API

加密类组件 模块介绍RSA提RSA供生成密钥加解密验签等系列方法(基于HarmonyOS API)AES提供AES生成密钥加解密等系列方法(基于HarmonyOS API)DES提供3DES生成密钥加解密等系列方法(基于HarmonyOS API)SM2提供SM2生成密钥加解密等系列方法(基于HarmonyOS API)SM3提供SM3生成摘要,…

蜜雪冰城小程序逆向

app和小程序算法一样 小程序是wasm

element-plus 2.7.6相关使用方式

1、按需导入时如何进行组件库语言切换&#xff1a; <template><el-config-provider :locale"zhCn"><el-table :data"tableData" style"width: 100%"> ...</el-table></el-config-provider> </template><…

U-KAN环境搭建推理测试

引子 U-Net的鼎鼎大名&#xff0c;我觉得无需我多言了。图像分割和扩散概率模型的基石。作者探索了KANs在改进视觉任务 Backbone 网络方面的未开发潜力。作者研究、修改并重新设计已建立的U-Net Pipeline &#xff0c;通过在标记化的中间表示上整合专用的KAN层&#xff0c;称之…

无线领夹麦克风可以唱歌吗?推荐多款收音好的无线麦克风

如今是一个短视频营销飞速发展的时代&#xff0c;越来越多自媒体人通过短视频的方式来进行直播带货、生活Vlog、线上K歌等&#xff0c;记录下生活里那美丽的瞬间。不过也有不少新手视频创作者存在疑问&#xff1a;无线领夹麦克风可以唱歌吗&#xff1f; 答案是可以的&#xff0…

SpringMvc 执行原理

当用户请求 会发送到前端控制器&#xff0c;DisptcherServlet根据请求参数生成代理请求&#xff0c;找到对应的实际控制器&#xff0c;控制器处理请求&#xff0c;创建数据模型&#xff0c;访问数据库&#xff0c;将模型响应给中心控制器&#xff0c;控制器使用模型与视图渲染视…

制定全面测试计划:使用TS-GNSS模拟器助力接收器选择

GPS/GNSS信号无处不在&#xff0c;也是目前定位导航应用中最为关键的一环&#xff0c;而GNSS接收器芯片组的低成本和高性能使得将GNSS接收器更容易得集成到以前从未有过的产品中去。由于存在以多种频率传输信号的多个GNSS星座&#xff0c;以及用于提高GNSS精度的各种可用技术&a…