vue3+ts+tinynce富文本编辑器+htmlDocx+file-saver 配合实现word下载

news2025/1/16 11:15:54

vue3 请下载html-docx-js-typescript,否则会报错类型问题

//报告导出word
import * as htmlDocx from "html-docx-js-typescript";
 //@ts-ignore
import { saveAs } from 'file-saver'
// 下载文件,
const downloadFile = (row)=> {
  try {
    const convertedFile = htmlDocx.asBlob(htmlstr);

    // 生成链接并且下载
    // const fileData = convertedFile
    convertedFile.then((fileData)=>{
      console.log(htmlstr,fileData)
      saveAs((fileData as Blob), row.reportName+'.docx', { encoding: 'UTF-8' })
    })

  } catch (error) {
    console.log(error)
  }
}

row.report效果及数据
在这里插入图片描述

<p class="MsoNormal" style="line-height: 28.0pt; mso-line-height-rule: exactly; vertical-align: baseline;">&nbsp;</p>
<p class="MsoNormal" style="text-align: center; line-height: 28.0pt; mso-line-height-rule: exactly; vertical-align: baseline;" align="center"><span style="font-size: 22.0pt; font-family: 方正小标宋_GBK; mso-hansi-font-family: 方正小标宋_GBK; letter-spacing: -.3pt;">数据质量报告模板</span></p>
<p style="text-align: center; line-height: 28.0pt; mso-line-height-rule: exactly; tab-stops: 92.15pt; text-autospace: none;" align="center"><span lang="EN-US" style="font-size: 16.0pt; mso-bidi-font-size: 10.0pt; font-family: 方正楷体_GBK; mso-hansi-font-family: 方正楷体_GBK; mso-bidi-font-family: 方正楷体_GBK; mso-font-kerning: 0pt;">&nbsp;</span></p>
<p class="MsoNormal" style="text-indent: 30.8pt; mso-char-indent-count: 2.0; line-height: 28.0pt; mso-line-height-rule: exactly; mso-outline-level: 1;"><span style="font-size: 16.0pt; mso-bidi-font-size: 10.0pt; font-family: 方正黑体_GBK; mso-hansi-font-family: 方正黑体_GBK; letter-spacing: -.3pt;">一、总体情况</span></p>
<p class="MsoNormal" style="text-indent: 32.0pt; mso-char-indent-count: 2.0; line-height: 28.0pt; mso-line-height-rule: exactly;"><span style="font-size: 16.0pt; font-family: 方正仿宋_GBK; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; mso-bidi-language: AR;">截至</span><span lang="EN-US" style="font-size: 16.0pt; font-family: 方正仿宋_GBK; mso-fareast-font-family: 宋体; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; color: blue; mso-bidi-language: AR;">&lt;</span><span style="font-size: 16.0pt; font-family: 宋体; mso-ascii-font-family: 方正仿宋_GBK; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; color: blue; mso-bidi-language: AR;">日期函数</span><span lang="EN-US" style="font-size: 16.0pt; font-family: 方正仿宋_GBK; mso-fareast-font-family: 宋体; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; color: blue; mso-bidi-language: AR;">&gt;</span><span style="font-size: 16.0pt; font-family: 方正仿宋_GBK; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; mso-bidi-language: AR;">,发现问题数据</span><span lang="EN-US" style="font-size: 16.0pt; font-family: 方正仿宋_GBK; mso-fareast-font-family: 宋体; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; color: blue; mso-bidi-language: AR;">&lt;</span><span style="font-size: 16.0pt; font-family: 宋体; mso-ascii-font-family: 方正仿宋_GBK; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; color: blue; mso-bidi-language: AR;">发现问题数据</span><span lang="EN-US" style="font-size: 16.0pt; font-family: 方正仿宋_GBK; mso-fareast-font-family: 宋体; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; color: blue; mso-bidi-language: AR;">&gt;</span><span style="font-size: 16.0pt; font-family: 方正仿宋_GBK; mso-hansi-font-family: 方正仿宋_GBK; mso-bidi-font-family: 方正仿宋_GBK; mso-bidi-language: AR;">条,</span></p>

调用
在这里插入图片描述

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

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

相关文章

24个非常实用的Python小技巧

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 1.唯一性 以下方法可以检查给定列表是否有重复的地方&#xff0c;可用set&#xff08;&#xff09;的属性将其从列表中删除。 x [1,1,2,2,3,2,3,4,5,6] y [1,2,3,4,5] len(x) len(set(x)) # False len(y) len(set(y)) # Tr…

压力变送器与传统压力表相比,有哪些优势?

在压力变送器还未普及的时候&#xff0c;工业自动化生产中的压力数据普遍采用压力表进行数据采集&#xff0c;但是压力表数据在使用的过程中&#xff0c;经常存在记录不方便、校验周期短、故障率高的问题&#xff0c;随着数字化在工业生产中的广泛应用&#xff0c;压力变送器逐…

[EasyX库安装介绍讲解】超详细入门级

基本说明 EasyX 是针对 C 的图形库&#xff0c;可以帮助 C/C 初学者快速上手图形和游戏编程。 比如&#xff0c;可以基于 EasyX 图形库很快的用几何图形画一个房子&#xff0c;或者一辆移动的小车&#xff0c;可以编写俄罗斯方块、贪吃蛇、黑白棋等小游戏&#xff0c;可以练习…

安防视频监控/视频集中存储/云存储平台EasyCVR无法播放HLS协议该如何解决?

视频云存储/安防监控EasyCVR视频汇聚平台基于云边端智能协同&#xff0c;支持海量视频的轻量化接入与汇聚、转码与处理、全网智能分发、视频集中存储等。音视频流媒体视频平台EasyCVR拓展性强&#xff0c;视频能力丰富&#xff0c;具体可实现视频监控直播、视频轮播、视频录像、…

Andorid 属性动画ObjectAnimation整理

属性动画相关内容可参考官网 动画资源 属性动画概览 来自官网的说明&#xff0c; 属性动画与视图动画的区别 视图动画系统仅提供为 View 对象添加动画效果的功能&#xff0c;因此&#xff0c;如果您想为非 对象添加动画效果&#xff0c;则必须实现自己的代码才能做到。视图动…

微信开发之一键创建标签的技术实现

简要描述&#xff1a; 添加标签 请求URL&#xff1a; http://域名地址/addContactLabel 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#xff1a;login接口返回 参数&#xff1a; 参数名必选类型说明…

高校实验室预约平台

高校实验室预约平台 我们​正在定制开发的软件&#xff0c;资源都在完成数字化管理&#xff0c;然后向社会开放… 每个行业走在向数字化深化&#xff0c;昨天看到一个数字&#xff0c;美国企业SAAS软件的渗透率为75%&#xff0c;中国企业还只有15%&#xff0c;中国企业数字化还…

同创永益入选首批“金融数字韧性与混沌工程实践试点机构”

8月16日下午&#xff0c;由北京国家金融科技认证中心、北京国家金融标准化研究院联合主办的“传递信任 服务发展”金融科技标准认证生态大会在太原成功举办。中国金融电子化集团有限公司党委书记、董事长周逢民&#xff0c;中国科学院院士冯登国&#xff0c;中国工商银行首席技…

如何制作党建专题汇报片

通过展示党组织的凝聚力和战斗力&#xff0c;增强党员的组织归属感和团结合作意识。通过宣传片&#xff0c;可以加强党组织的凝聚力&#xff0c;推动党的事业发展。制作党建专题汇报片需要一定的前期准备和后期制作技巧。下面是由深圳党建专题汇报片制作公司老友记小编为您整理…

kubesphere安装Maven+JDK17 流水线打包

kubesphere 3.4.0版本&#xff0c;默认支持的jav版本是8和11&#xff0c;不支持17 。需要我们自己定义JenKins Agent 。方法如下&#xff1a; 一、构建镜像 1、我们需要从Jenkins Agent的github仓库拉取master最新源码&#xff0c;最新源码里已经支持jdk17了。 git clone ht…

Spring 如何解决循环依赖问题 - 三级缓存

1. 什么是循环依赖问题 ? 循环依赖问题是指对象与对象之间存在相互依赖关系&#xff0c;而且形成了一个闭环&#xff0c;导致两个或多个对象都无法准确的完成对象的创建和初始化。 两个对象间的循环依赖&#xff1a; 多个对象间的循环依赖 &#xff1a; 解决 Spring 中的循环…

MobaXtermV10.7安装步骤

目录 1&#xff0c;打开​编辑 2&#xff0c;填写自己的虚拟机IP和用户名&#xff0c;点机OK 3,设置 MobaXterm是一款增强型远程连接工具&#xff0c;主要用于Windows的增强终端&#xff0c;带有X11服务器、选项卡式SSH客户端、网络工具等。在一个Windows应用程序中&#xff…

acunetix2023安装教程

1、解压之后一键安装exe文件 2、将解压出来的Awv2023.6[Windows]文件夹下的wvsc.exe文件放置于AWVS安装目录&#xff0c;与原文件进行替换&#xff0c;如图所示。&#xff08;注&#xff1a;如果是默认安装&#xff0c;则文件位置位于C:\Program Files (x86)\Acunetix\14.2.210…

C语言“牵手”京东商品详情数据方法,京东商品详情API接口,京东API申请指南

京东是中国最大的自营式电商企业&#xff0c;在线销售计算机、手机及其它数码产品、家电、汽车配件、服装与鞋类、奢侈品、家居与家庭用品、化妆品与其它个人护理用品、食品与营养品、书籍与其它媒体产品、母婴用品与玩具、体育与健身器材以及虚拟商品等。 京东平台的商品详情…

12.6V三节锂电池升压充电管理IC

HU5810C是5V输入升压充电12.6V1.2A给三节锂电池充电芯片 输入小电流不会拉死&#xff0c;温度60建议1000-1100MA带NTC热敏温度电流保护。HU5810C是一款5V输入,1.2A充电电流,支持三节锂电池串联应用 ,锂离子电池的升压充电管理IC。HU4059C集成功率MOS&#xff0c;采用异步开关架…

pycharm Failed to connect to github.com port 443: Timed out

使用浏览器发现必需打开代理才能访问github, 故有可能是pycharm没有设置代理. 在设置中选择自动代理模式.

【LeetCode】205. 同构字符串 - 数组

这里写自定义目录标题 2023-8-29 16:32:00 205. 同构字符串 2023-8-29 16:32:00 详细通俗的思路分析&#xff0c;多解法 重新了一遍解法二&#xff0c;下次再写这个题目&#xff0c;我要试一试用HashMap class Solution {public boolean isIsomorphic(String s, String t)…

视频监控/视频汇聚/视频云存储EasyCVR平台HLS流集成在小程序无法播放问题排查

安防视频/视频云存储/视频集中存储EasyCVR视频监控综合管理平台可以根据不同的场景需求&#xff0c;让平台在内网、专网、VPN、广域网、互联网等各种环境下进行音视频的采集、接入与多端分发。在视频能力上&#xff0c;视频云存储平台EasyCVR可实现视频实时直播、云端录像、视频…

Mac系统Anaconda环境配置Python的json库

本文介绍在Mac电脑的Anaconda环境中&#xff0c;配置Python语言中&#xff0c;用以编码、解码、处理JSON数据的json库的方法&#xff1b;在Windows电脑中配置json库的方法也是类似的&#xff0c;大家可以一并参考。 JSON&#xff08;JavaScript Object Notation&#xff09;是一…

四川玖璨电子商务有限公司:抖店运营攻略

抖店运营&#xff0c;是指在抖音平台上进行电商销售的一种新型商业模式。随着抖音平台越来越受到年轻人的喜爱和关注&#xff0c;抖店运营正变得越来越重要。那么&#xff0c;抖店运营应该如何做呢&#xff1f;我们来谈谈抖店运营的一些攻略。 第一&#xff0c;选对产品。选择…