当前位置: 首页 > 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…...

OpenArk内核驱动加载故障排除:从问题诊断到解决方案

OpenArk内核驱动加载故障排除&#xff1a;从问题诊断到解决方案 【免费下载链接】OpenArk The Next Generation of Anti-Rookit(ARK) tool for Windows. 项目地址: https://gitcode.com/GitHub_Trending/op/OpenArk OpenArk作为新一代Windows反Rootkit工具&#xff0c;其…...

如何在树莓派上搭建Spotify Connect客户端:Raspotify完整安装配置指南

如何在树莓派上搭建Spotify Connect客户端&#xff1a;Raspotify完整安装配置指南 【免费下载链接】raspotify A Spotify Connect client that mostly Just Works™ 项目地址: https://gitcode.com/gh_mirrors/ra/raspotify 想要将你的树莓派变成专业的Spotify Connect音…...

直接上干货,咱们用粒子群算法给PID控制器做个暴力调参。传统PID参数调整像盲人摸象,PSO(粒子群优化)相当于派出一群带雷达的无人机直接扫描整片山区找最优解

基于粒子群算法的PID控制优化算法案例 matlab源代码 代码有详细注释&#xff0c;完美运行先看目标——让这个二阶系统达到最顺滑的响应&#xff1a; % 被控对象传递函数 sys tf(1, [1 3 2]); t 0:0.01:10; % 时间序列 粒子群的核心配置得够骚&#xff1a; %% PSO参…...

GuwenBERT:古文自然语言处理的技术革新

GuwenBERT&#xff1a;古文自然语言处理的技术革新 【免费下载链接】guwenbert GuwenBERT: 古文预训练语言模型&#xff08;古文BERT&#xff09; A Pre-trained Language Model for Classical Chinese (Literary Chinese) 项目地址: https://gitcode.com/gh_mirrors/gu/guwe…...

零代码部署YOLOv9:官方镜像5分钟快速上手,实测效果惊艳

零代码部署YOLOv9&#xff1a;官方镜像5分钟快速上手&#xff0c;实测效果惊艳 1. 为什么选择YOLOv9官方镜像 目标检测领域的最新突破YOLOv9已经发布&#xff0c;但很多开发者在尝试部署时遇到了各种环境配置问题。这个官方预构建的镜像解决了三大核心痛点&#xff1a; 环境配置…...

2026年3月26隔夜暗盘挂单排行榜

推荐好文:每年节约五六千交易费不香吗如何获取龙虎榜是否有量化参与如何获取股东减持信息大A有5400多只股票, 这里面只有不到10%, 约500只由资金投票, 剩余的都是杂毛, 炒股看龙头找主线. 从隔夜挂单里选择, 再叠加我们之前分享的如何判断是否有大股东减持, 是否有融资融券参与…...

从碎片到全景:基于RDP缓存文件(*.bmc)的自动化取证与图像重构实践

1. 揭开RDP缓存文件的神秘面纱 第一次接触*.bmc文件时&#xff0c;我完全没意识到这些看似普通的缓存文件里藏着这么多秘密。当时正在处理一个内部安全审计项目&#xff0c;需要确认某位离职员工是否通过远程桌面泄露了公司数据。在翻遍常规日志无果后&#xff0c;同事提醒我检…...

提升arduino开发效率:用快马平台一键生成常用工具模块代码

作为一名经常折腾Arduino的开发者&#xff0c;我发现在项目开发中&#xff0c;总有些重复性的代码需要反复编写。最近尝试用InsCode(快马)平台来生成这些常用工具模块&#xff0c;效率提升非常明显。今天就把我的实践心得分享给大家。 I2C设备扫描功能 在连接多个I2C设备时&…...

生物信息学新手必看:BBmap比对工具从安装到实战全流程指南

生物信息学新手必看&#xff1a;BBmap比对工具从安装到实战全流程指南 第一次接触生物信息学数据分析时&#xff0c;面对海量的测序数据往往会感到无从下手。比对工具的选择尤为关键——既要保证准确性&#xff0c;又要兼顾效率。BBmap作为BBTools套件中的核心工具&#xff0c;…...

写论文没思路?这样梳理,新手也能快速理清逻辑

写论文最磨人的&#xff0c;从来不是熬夜写正文&#xff0c;而是明明定好了选题&#xff0c;却陷入“思路卡顿”的死循环——对着空白文档坐一下午&#xff0c;脑子里只有零散的碎片想法&#xff0c;不知道从哪切入、怎么展开&#xff0c;好不容易写下几句&#xff0c;又觉得逻…...