当前位置: 首页 > news >正文

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 = convertedFileconvertedFile.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>

调用
在这里插入图片描述

相关文章:

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

vue3 请下载html-docx-js-typescript&#xff0c;否则会报错类型问题 //报告导出word import * as htmlDocx from "html-docx-js-typescript";//ts-ignore import { saveAs } from file-saver// 下载文件&#xff0c; const downloadFile (row)> {try {const co…...

论文阅读 The Power of Tiling for Small Object Detection

The Power of Tiling for Small Object Detection Abstract 基于深度神经网络的技术在目标检测和分类方面表现出色。但这些网络在适应移动平台时可能会降低准确性&#xff0c;因为图像分辨率的增加使问题变得更加困难。在低功耗移动设备上实现实时小物体检测一直是监控应用的…...

【FreeRTOS】【应用篇】消息队列【下篇】

前言 本篇文章主要对 FreeRTOS 中消息队列的概念和相关函数进行了详解消息队列【下篇】详细剖析了消息队列中发送、接收时队列消息控制块中各种指针的行为&#xff0c;以及几个发送消息和接收消息的函数的运作流程笔者有关于 【FreeRTOS】【应用篇】消息队列【上篇】——队列基…...

芯片技术的崭新时代:探索未来的可能性

引言 芯片作为现代科技领域的核心&#xff0c;扮演着无可替代的角色。从智能手机到数据中心&#xff0c;从医疗设备到智能家居&#xff0c;芯片技术已经深刻地改变了我们的生活。然而&#xff0c;随着技术的不断发展&#xff0c;芯片行业也在经历着一场前所未有的变革。本文将…...

博流RISC-V芯片Eclipse环境搭建

文章目录 1、下载 Eclipse2、导入 bouffalo_sdk3、编译4、烧录5、使用ninja编译 之前编译是通过 VSCode 编译&#xff0c;通过手工输入 make 命令编译&#xff0c;我们也可以通过 Eclipse 可视化 IDE 来编译、烧录。 1、下载 Eclipse 至 Eclipse 官网 https://www.eclipse.org…...

智慧水产养殖方案,守护养殖水产品安全!

水产品在人们的饮食文化中占据着举足轻重的地位&#xff0c;更是人们摄入蛋白质的重要来源。因此&#xff0c;保障食品安全&#xff0c;提升养殖水产品的品质至关重要然。而传统的人工观察水产养殖方式较为单一&#xff0c;难以及时发现水质问题和投喂情况&#xff0c;容易导致…...

前端vue引入高德地图入门教程

距离上一篇关于前端项目中使用高德地图的文章已经将近5年之久&#xff0c; 这是我的第一篇关于高德地图的文章 这期间前端技术日新月异&#xff0c;5年前JQuery还如日中天&#xff0c;如今已经销声匿迹&#xff0c;很少有公司招聘还在要求JQuery&#xff0c;更多的是Vue、React…...

【LeetCode题目详解】第八章 贪心算法 part05 435. 无重叠区间 763.划分字母区间 56. 合并区间 (day36补)

本文章代码以c为例&#xff01; 一、力扣第435题&#xff1a;无重叠区间 题目&#xff1a; 给定一个区间的集合 intervals &#xff0c;其中 intervals[i] [starti, endi] 。返回 需要移除区间的最小数量&#xff0c;使剩余区间互不重叠 。 示例 1: 输入: intervals [[1,…...

数据的语言:学习数据可视化的实际应用

数据可视化应该学什么&#xff1f;这是一个在信息时代越来越重要的问题。随着数据不断增长和积累&#xff0c;从社交媒体到企业业务&#xff0c;从科学研究到医疗健康&#xff0c;我们都面临着海量的数据。然而&#xff0c;数据本身往往是冰冷、抽象的数字&#xff0c;对于大多…...

【Flutter】Flutter简介

Flutter是Google开发的一款用于构建高性能、高保真移动应用程序的开源UI工具包。它允许开发人员使用Dart语言来构建跨平台的移动应用程序&#xff0c;并提供了丰富的UI组件、动画效果和手势识别等功能。 以下是Flutter入门的一些详细介绍&#xff1a; Flutter概述 Flutter是一…...

做区块链卡牌游戏有什么好处?

区块链卡牌游戏是一种基于区块链技术的创新性游戏形式&#xff0c;它将传统的卡牌游戏与区块链技术相结合&#xff0c;实现了去中心化、数字化资产的交易和收集。这种新型游戏形式正逐渐在游戏行业引起了广泛的关注和热潮。本文将深入探讨区块链卡牌游戏的定义、特点以及其在未…...

C语言每日一练------Day(5)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;错误的集合 密码检查 &#x1f493;博主csdn个人主页&#xff1a;小小u…...

(Windows )本地连接远程服务器(Linux),免密码登录设置

在使用VScode连接远程服务器时&#xff0c;每次打开都要输入密码&#xff0c;以及使用ssh登录或其它方法登录&#xff0c;都要本地输入密码&#xff0c;这大大降低了使用感受&#xff0c;下面总结了免密码登录的方法&#xff0c;用起来巴适得很&#xff0c;起飞。 目录 PowerSh…...

Python 面试:异常处理机制

格式&#xff1a; 继承Exception实现自定义异常。 注意&#xff1a;这里是继承Exception类&#xff0c;而不是BaseException类&#xff0c;因为继承BaseException可能会导致捕获不到自定义异常。 class MyException(Exception):passtry:raise MyException(my salary is too…...

Matlab图像处理-水平镜像

镜像变换 镜像变换又常称为对称变换&#xff0c;它可以分为水平对称、垂直对称等多种变换。对称变换后&#xff0c;图像的宽和高不变。 图像的镜像分为两种垂直镜像和水平镜像。 水平镜像即将图像左半部分和右半部分以图像竖直中轴线为中心轴进行对换&#xff1b; 竖直镜像…...

Ansys Zemax | 手机镜头设计 - 第 2 部分:使用 OpticsBuilder 实现光机械封装

本文是3篇系列文章的一部分&#xff0c;该系列文章将讨论智能手机镜头模块设计的挑战&#xff0c;从概念、设计到制造和结构变形的分析。本文是三部分系列的第二部分。概括介绍了如何在 CAD 中编辑光学系统的光学元件以及如何在添加机械元件后使用 Zemax OpticsBuilder 分析系统…...

【GPT,Flask】用Python Flask结合OpenAI的GPT API构建一个可自主搭建的内容生成应用网站

【背景】 自己构建模型并进行训练需要很高的知识,技能和资源门槛。如今,通过OpenAI提供的API,则可以快速通过GPT能力构建可以提供内容生成服务的在线网站。这套框架可以提供给用户,用户可以利用该框架在自己的环境(比如自己的公司内)构建内容生成服务。你也可以自己上线…...

vue + electron

node 版本 v14.19.3 npm 版本 6.14.17 要是node-sass报错执行命令&#xff1a; npm uninstall node-sass sass-loader npm i node-sass4.14.1 sass-loader7.3.1 --save -dev首先安装依赖 npm install electron npm install electron-packagerelectronRun.js放在根目录下 con…...

spring中LocalDateTime 转成字符串的时候注意事项

ApiOperation("查询课程发布信息") ResponseBody GetMapping("/r/coursepublish/{courseId}") public CoursePublish getCoursepublish(PathVariable("courseId") Long courseId) { CoursePublish coursePublish coursePublishService.getC…...

vue数组对象中按某一字段排序

给下列数组字段中的month排序 第一步&#xff1a;methods中写一个方法如下&#xff1a; sortBy(attr, rev) {//第二个参数没有传递 默认升序排列if(rev undefined) {rev 1;} else {rev (rev) ? 1 : -1;}return function(a, b) {a a[attr];b b[attr];if(a < b) {retu…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

PHP和Node.js哪个更爽?

先说结论&#xff0c;rust完胜。 php&#xff1a;laravel&#xff0c;swoole&#xff0c;webman&#xff0c;最开始在苏宁的时候写了几年php&#xff0c;当时觉得php真的是世界上最好的语言&#xff0c;因为当初活在舒适圈里&#xff0c;不愿意跳出来&#xff0c;就好比当初活在…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

第 86 场周赛:矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

智能分布式爬虫的数据处理流水线优化:基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...