如何将 html 渲染后的节点传递给后端?

news2024/10/12 11:18:35

问题

现在我有一个动态的 html 节点,我想用 vue 渲染后,传递给后端保存

在这里插入图片描述

思路

  • 本来想给html的,发现样式是个问题

  • 在一个是打印成pdf,然后上传,这个操作就变多了

  • 最后的思路是通过 html2canvas 转化成 canvas 然后变成 blob 然后变成 base64String

  • 用到的库叫 html2canvas

import html2canvas from 'html2canvas'
html2canvas(dom).then(async function (canvas) {
    // 将 Canvas 转换为 Blob 或 Base64 字符串
    const blob = await new Promise<Blob>((resolve: any) => {
        canvas.toBlob(resolve, 'image/png')
    })

    // 将 Blob 转换为 Base64 字符串
    const base64String = await new Promise<string>(resolve => {
        const reader = new FileReader()
        reader.onloadend = () => resolve(reader.result as string)
        reader.readAsDataURL(blob)
    })

    const params = {
        id,
        html: base64String
    }

    await SaveHTML(params)
})

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

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

相关文章

鸿蒙--WaterFlow 实现商城首页

目录结构 ├──entry/src/main/ets // 代码区 │ ├──common │ │ ├──constants │ │ │ └──CommonConstants.ets // 公共常量类 │ │ └──utils │ │ └──Logger.ets // 日志打印类 │ ├──entryability │ │ └──EntryAbility.ets // 程序入口…

TypeScript 中命名空间与模块的理解及区别

文章目录 一、模块&#xff08;Modules&#xff09;示例 二、命名空间&#xff08;Namespaces&#xff09;示例 三、区别 一、模块&#xff08;Modules&#xff09; 在 TypeScript 中&#xff0c;任何包含顶级 import 或 export 声明的文件都被视为一个模块。模块的特点是它有…

未来的电影:人机环境生态系统智能

本文摘自《影视产业研究》2024年10月创刊号 摘要: 随着人工智能的快速发展&#xff0c;未来的电影得到了广泛关注。通过对未来电影相关研究提供了一种将人机环境系统智能与影游结合的方式来解决未来电影的瓶颈问题&#xff0c;并从态势感知相关研究角度进行了研究。鉴于此&…

阿里云等联合编写的《2024大模型典型示范应用案例集》(附PDF分享)

这份大模型案例集资料已经上传CSDN&#xff0c;朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费】 2024 年是大模型深入赋能千行百业&#xff0c;融入实体经济&#xff0c;助力科技创新的一年。截至今年5月&#xff0c;我国国产大模型的数量已经超过…

taozige/基于Java语言的充电桩平台+充电桩系统+充电桩管理系统+充电桩系统源码+充电桩管理后台+充电桩小程序

简述 SpringBoot 框架&#xff0c;充电桩平台充电桩系统充电平台充电桩互联互通协议云快充协议1.5新能源汽车电动自行车公交车-四轮车充电充电源代码充电平台源码Java源码无加密项目 介绍 云快充协议云快充1.5协议云快充协议开源代码云快充底层协议云快充桩直连桩直连协议充…

Python人脸识别实战——基于Dlib和OpenCV的人脸识别与关键点检测(附完整代码和结果图)

Python人脸识别实战——基于Dlib和OpenCV的人脸识别与关键点检测&#xff08;附完整代码和结果图&#xff09; 关于作者 作者&#xff1a;小白熊 作者简介&#xff1a;精通python、matlab、c#语言&#xff0c;擅长机器学习&#xff0c;深度学习&#xff0c;机器视觉&#xff0…

基于FPGA的以太网设计(一)

以太网简介 以太网&#xff08;Ethernet&#xff09;是一种计算机局域网技术。IEEE组织的IEEE 802.3标准制定了以太网的技术标准&#xff0c;它规定了包括物理层的连线、电子信号和介质访问控制的内容。以太网是目前应用最普遍的局域网技术&#xff0c;取代了其他局域网标准如…

在线深度学习:爱奇艺效果广告分钟级模型优化

01# 背景 在效果广告投放场景中&#xff0c;媒体侧需要准确衡量每次请求的价值&#xff0c;模型预估值在广告竞价中扮演着核心角色。模型预估精度的提升&#xff0c;是改善媒体侧变现效率、提升广告收益的核心技术驱动力。 此前&#xff0c;爱奇艺效果广告预估模型为小时级模型…

爬虫设计思考之二

“所谓爬虫,其本质是一种计算机程序,它的行为看起来就像是蜘蛛在网上面爬行一样,顺着互联网这个“网”,一条线一条线地“爬行”。 一、认识爬虫 爬虫这个词对于非专业人士比较的陌生&#xff0c;但是实际却和我们的生活息息相关。例如我们国内经常使用的百度浏览器搜索&#x…

Qt-系统处理鼠标相关事件(57)

目录 使用 按下事件 释放事件 双击事件 移动事件 滚轮事件 使用 按下事件 实现下面的功能 鼠标在此处点击&#xff0c;就可以获取鼠标位置 添加函数 提升函数 手册中找到这个函数的原型 重写该函数 定义 重写 这里有一个细节需要注意&#xff0c;因为这里的标准点击…

单服务器基于 Nginx 负载均衡 + Docker Compose 提高并发量

背景信息 开发需求 单服务器的多服务管理 多服务器的集群管理可参考博主 docker swarm 的技术分享《基于 docker swarm 和 NVIDIA MIG 部署并行 AI 推理服务》 根据服务请求量和服务器规模的匹配程度&#xff0c;多服务器集群的性能对于目前来说过剩&#xff0c;故有了本研究的…

c#-出现类型初始值设定项引发异常的解决方案

当出现该问题时&#xff0c;通常摸不着头脑&#xff0c;无法定位到该问题所在行。 我们可以找到应发异常的类&#xff0c;例如我上面类为YY_Model.DefaultConfig。 打开这个类文件&#xff0c;加一个断点&#xff0c;一行行运行&#xff0c;到哪里突然跳出该文件&#xff0c;则…

Python脚本实现发送QQ邮件

需要发件人邮箱地址、授权码和收件人邮箱地址 1、登录QQ邮箱后台&#xff0c;点击右上角设置&#xff0c;下拉找到第三方服务&#xff0c;开启SMTP服务&#xff0c;复制生成的授权码 2、新建一个python文件&#xff0c;输入以下源码&#xff0c;更替参数后运行即可 import smt…

【计算机网络 - 基础问题】每日 3 题(三十六)

✍个人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/fYaBd &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 C 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞…

无缝数据流动:跨域数据交换的高效策略

大型企业为了业务拓展需要&#xff0c;会在全国乃至全球各地设立分公司和办事机构&#xff0c;以便更好地处理当地事务&#xff0c;并进行市场的开拓和客户维护&#xff0c;因此大型企业都会面临跨域数据交换的场景。 跨域数据交换时&#xff0c;需要考虑多方面的问题&#xff…

使用机器学习边缘设备的快速目标检测

论文标题&#xff1a;Fast Object Detection with a Machine Learning Edge Device 中文标题&#xff1a;使用机器学习边缘设备的快速目标检测 作者信息&#xff1a; Richard C. Rodriguez, MSDA Information Systems and Cyber Security Department, The University of Tex…

IEEE新晋“水刊”,非OA,2个月可录,毕业神刊比《IEEE Access》更保险!

本期解析&#xff1a;综合类 本期解析IEEE旗下的【综合类-仪器仪表】SCI 优点&#xff1a; 审稿速度快&#xff0c;快的2-4个月录用&#xff1b; 非OA&#xff0c;国人友好&#xff0c;录用率高&#xff1b; 缺点&#xff1a; 出版周期可能较长 期刊简介 IEEE Sensors Jou…

【Java】jvisualvm工具

jdk8及以下版本自带&#xff0c;在jdk的bin目录下&#xff0c;jvisualvm.exe jdk8以上去官网下载&#xff1a;https://visualvm.github.io/index.html 本地的会自动获取&#xff0c;发布在服务器上的用远程进行连接&#xff0c;发布的程序需配置JVM参数&#xff0c;如下 -Dcom…

Linux下的文件打包、压缩和解压缩

文章目录 打包、压缩、解压缩整体介绍数据压缩gzip示例压缩单个文件压缩多个文件保留原始文件并压缩递归压缩目录解压缩文件查看gz压缩文件的内容 bzip2示例压缩单个文件压缩多个文件压缩目录下的文件解压缩文件查看bz2压缩文件的内容 命令行选项总结 zip示例压缩文件解压缩文件…

vue3学习之插槽slot

关于slot web组件内部的占位符&#xff0c;可以使用自己的标记填充这个占位符 &#xff0c;具名插槽就是在slot标签上添加name属性&#xff08;https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/slot&#xff09; vue3官方文档&#xff1a;https://cn.vuejs.org/gui…