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

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.mfbz.cn/a/100768.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2.(Python数模)线性规划问题

Python解决线性规划问题 参考了以下博文 https://blog.csdn.net/m0_46692607/article/details/126784109?spm1001.2014.3001.5506 目标是解决以下的线性规划&#xff0c;程序计算出目标函数的最大值&#xff0c;并在最大值下取得的x1x2x3对应值。 源代码如下&#xff1a; …

基于单片机的串行通信发射机设计

一、项目介绍 串行通信是一种常见的数据传输方式&#xff0c;允许将数据以比特流的形式在发送端和接收端之间传输。当前实现基于STC89C52单片机的串行通信发射机&#xff0c;通过红外发射管和接收头实现自定义协议的数据无线传输。 二、系统设计 2.1 单片机选择 在本设计中&…

基于单片机的点阵电子显示屏上下左右移加减速系统

一、系统方案 本设计的任务就是完成一个1616的点阵设计&#xff0c;并能滚动显示“********************”内容。 主要内容是&#xff0c;能同时流动显示汉字&#xff1b;能实现显示汉字无闪烁&#xff1b;能实屏幕亮度较高。本LED显示屏能够以动态扫描的方式显示一个1616点阵汉…

19 Linux之Python定制篇-apt软件管理和远程登录

19 Linux之Python定制篇-apt软件管理和远程登录 文章目录 19 Linux之Python定制篇-apt软件管理和远程登录19.1 apt软件管理19.1.1 apt介绍19.1.2 更新软件下载地址-阿里源19.1.3 使用apt完成安装和卸载vim 19.2 远程登录Ubuntu 学习视频来自于B站【小白入门 通俗易懂】2021韩顺…

SIP对讲求助终端,带功放输出

SV-7011TP SIP对讲求助终端&#xff0c;带功放输出 一、描述 网络对讲终端SV-7011TP&#xff0c;SV-7011TP能处理tcp/ip网络音频流&#xff0c;并驱动扬声器进行播音的终端&#xff0c;主要用于公共数字广播&#xff0c;媒体教学&#xff0c;报警等需要数字音频的领域。 SV-…

css让元素保持等比例宽高

使用新属性 aspect-ratio: 16/9; 代码示例 <style>div {width: 60%;/* 等比例宽高 */aspect-ratio: 16/9;background-color: red;margin: auto;}</style> </head><body><div></div> </body>示例 aspect-ratio兼容性

java自动登录 selenium 自动登录并获取cookie

选择操作网页 我用的edge&#xff0c;谷歌我的版本太高没有对应的驱动… 下载Edge的驱动程序&#xff0c;直接解压就好里面只有一个.exe文件 https://developer.microsoft.com/en-us/microsoft-edge/tools/webdriver/ 复制即用&#xff0c;看注释 import com.alibaba.fastjs…

C++——vector:resize与reserve的区别,验证写入4GB大数据时相比原生操作的效率提升

resize和reserve的区别 reserve&#xff1a;预留空间&#xff0c;但不实例化元素对象。所以在没有添加新的对象之前&#xff0c;不能引用容器内的元素。而要通过调用push_back或者insert。 resize&#xff1a;改变容器元素的数量&#xff0c;且会实例化对象&#xff08;指定或…

无涯教程-JavaScript - QUARTILE函数

QUARTILE函数取代了Excel 2010中的QUARTILE.INC函数。 描述 该函数返回数据集的四分位数。四分位数通常用于销售和调查数据中,以将人群分为几类。 语法 QUARTILE (array,quart)争论 Argument描述Required/OptionalArrayThe array or cell range of numeric values for whi…

云服务器利用Docker搭建sqli-labs靶场环境

一、安装宝塔面板 使用xshell、electerm、SecureCRT等远程终端连接登陆上云服务器&#xff0c;在Linux宝塔面板使用脚本安装 安装后&#xff0c;如下图&#xff1a;按照提示&#xff0c;在云服务器防火墙/安全组放行Linux宝塔面板的端口 在浏览器打开上述网址&#xff0c;登…

服务器数据恢复-reiserfs文件系统损坏如何恢复数据?

服务器数据恢复环境&#xff1a; 一台IBM X系列服务器&#xff0c;4块SAS硬盘组建一组RAID5阵列&#xff0c;采用的reiserfs文件系统。服务器操作系统分区结构&#xff1a;boot分区LVM卷swap分区&#xff08;按照前后顺序&#xff09;。LVM卷中直接划分了一个reiserfs文件系统&…

Windows无法删除分区怎么办?

我们知道Windows系统内置的磁盘管理工具是一个很实用的程序&#xff0c;可以帮助我们完成很多磁盘分区相关的基础操作&#xff0c;比如当我们想要删除硬盘上的某一个分区时&#xff0c;先想到的可能会是磁盘管理工具。但是当我们准备在磁盘管理工具中删除某个分区时&#xff0c…

合宙Air724UG LuatOS-Air LVGL API控件--复选框 (Checkbox)

复选框 (Checkbox) 复选框主要是让用户进行一些内容选择&#xff0c;或者同意用户协议。 示例代码 – 复选框回调函数 function event_handler(obj, event) if event lvgl.EVENT_VALUE_CHANGED then print(“State”, lvgl.checkbox_is_checked(obj)) end end – 创建复选框…

排序之交换排序

文章目录 前言一、冒泡排序1、冒泡排序基本思想2、冒泡排序的效率 二、快速排序 -- hoare版本1、快速排序基本思想2、快速排序代码实现3、为什么最左边值做key时&#xff0c;右边先走 三、快速排序 -- 挖坑法1、快速排序 -- 挖坑法基本思想2、快速排序 -- 挖坑法代码实现3、为什…

postgis中将数据库备份到其它数据库中还原

1、备份数据库 可以用命令操作 pg_dump -U postgres -h hostip -d joint-boot -Fc > "D:\\python\\Project\\PG\\data\\joint.jar"2、创建新的数据库 可以在其它postgis数据库中创建 3、还原数据库 可以用命令操作 pg_restore -U postgres -h hostip -d C -F…

无涯教程-Android - DatePicker函数

Android Date Picker允许您在自定义用户界面中选择由日,月和年组成的日期。为此功能,android提供了DatePicker和DatePickerDialog组件。 在本教程中,我们将通过DatePickerDialog演示日期选择器的用法, DatePickerDialog是一个包含DatePicker的简单对话框。 为了显示DatePicker…

【zookeeper】zookeeper介绍

分布式协调技术 在学习ZooKeeper之前需要先了解一种技术——分布式协调技术。那么什么是分布式协调技术&#xff1f;其实分布式协调技术主要用来解决分布式环境当中多个进程之间的同步控制&#xff0c;让他们有序的去访问某种临界资源&#xff0c;防止造成"脏数据"的…

vue 根据数值判断颜色

1.首先style样式给两种颜色 用:class 三元运算符判断出一种颜色 第一步&#xff1a;在style里边设置两种颜色 .green{color: green; } .orange{color: orangered; }在取数据的标签 里边 判断一种颜色 :class"item.quote.current >0 ?orange: green"<van-gri…

CSS 实现平面圆点绕椭圆动画

前言 &#x1f44f;CSS实现平面圆点绕椭圆动画,速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现原理 transform-style&#xff1a;CSS 属性 transform-style 设置元素的子元素是位于 3D 空间中还是平面中。如果选择平面&#xf…

QTday3(对话框、发布软件、事件处理核心机制)

一、Xmind整理&#xff1a; 二、上课笔记整理&#xff1a; 1.消息对话框&#xff08;QMessageBox&#xff09; ①基于属性版本的API QMessageBox::QMessageBox( //有参构造函数名QMessageBox::Icon icon, //图标const Q…
最新文章