使用html-docx-js + fileSaver实现前端导出word

因为html-docx-js是16年的老库了,它代码里面用到的with语法现在严格模式不允许,用npm直接引入会报错,所以我们需要用其它方式引入

首先要将html-docx-js的代码放到项目中

html-docx-js/dist/html-docx.js at master · evidenceprime/html-docx-js · GitHub

我这边的vue项目,所以放到public文件下

代码里面几个with的用法需要改一下,因为现在都是默认严格模式了

全局搜一下with(,然后把涉及到的都改成类似如下的即可

接下来到项目的html文件中,使用script标签引入

如果使用typescript,需要声明一下全局变量

export declare global {interface Window {htmlDocx: anysaveAs: (doc: any, name: string) => void}
}

这样子就可以在项目中愉快的使用了~使用方法如下:

// 需要打印的dom元素
const areaRef = ref()const handleDownload = () => {const cssText = `th, td {border-color: red;}`const content = `<!DOCTYPE html><html><head><style>${cssText}</style></head><body>${areaRef.value.outerHTML}</body></html>`const converted = window.htmlDocx.asBlob(content, {orientation: 'landscape',})window.saveAs(converted, 'test.docx')
}

PS:如果遇到样式问题的话,比如图片宽高(需要使用img标签的width和height属性),字体大小(需要使用pt)不生效的话,可以先把对应的docx模板转成html查看样式后再对应进行修改

docx转html网站

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

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

相关文章

Coze插件发布!PDF转Markdown功能便捷集成,打造你的专属智能体

近日&#xff0c;TextIn开发的PDF转Markdown插件正式上架Coze。 在扣子搜索“pdf转markdown”&#xff0c;或在Coze搜索“pdf2markdown” 即可找到插件&#xff0c;在你的专属智能体中便捷使用文档解析功能。 如果想测试解析插件在你需要的场景下表现如何&#xff0c;可以直接…

网络安全之xss靶场练习

目录 一、xss靶场练习 1、Ma Spaghet! 2、Jefff 第一个方法 第二个方法 3、Ugandan Knuckles 4、Ricardo Milos 5、Ah Thats Hawt 6、Ligma 7、Mafia​编辑 8、Ok, Boomer 一、xss靶场练习 靶场地址 https://xss.pwnfunction.com/ 页面显示如下 1、Ma Spaghet! 分析…

linux 你会配置静态路由吗?

1. centos 1. 配置静态路由 运行在openstack的虚拟机有多网卡的承载不同的物理平面的网络&#xff0c;比如业务网、管理网、存储网等。但是默认路由只有一条&#xff0c;所以只能通过静态路由来指定路由。 for example&#xff1a; 虚拟机eth0是管理网&#xff1a;10.0.43.0/…

【ARM 芯片 安全与攻击 5 -- 测信道攻击(Side-channel Attack)】

文章目录 什么是测信道攻击?测信道攻击在 ARM 架构中的设计与应用电源分析攻击(Power Analysis Attack)DPA 攻击示例时间分析攻击(Timing Attack)时间分析攻击示例缓存侧信道攻击(Cache Side-channel Attack)Flush+Reload 攻击示例应对测信道攻击的防御措施Summary什么是…

谈一谈数据虚拟化的技术核心和应用架构

数据虚拟化&#xff08;Data Virtualization&#xff09;是对数据资源的抽象&#xff0c;通过屏蔽数据资源的存储位置和访问方式&#xff0c;能够将不同数据源、不同格式的数据资源&#xff0c;进行逻辑上的整合集成。这一技术方案与过去面对传统数仓的弊端&#xff0c;业界过去…

板子电源接线

目的 就是电源接板子时&#xff0c;分清正负 过程 AC、交流电 没有正负 分火线和0线 AC-L 交流火线 AC-N 交流0线 FG&#xff1a;接的是大地 G&#xff1a;是直流输出的地 U&#xff1a;表示的是电压 DC是直流正&#xff0c;DC-是直流负 2个AC是接交流的&#xff0c;一般是左…

免费的真是太香了!Chainlit接入抖音 Coze AI知识库接口快速实现自定义用户聊天界面

前言 由于Coze 只提供了一个分享用的网页应用&#xff0c;网页访问地址没法自定义&#xff0c;虽然可以接入NextWeb/ChatGPT web/open webui等开源应用。但是如果我们想直接给客户应用&#xff0c;还需要客户去设置配置&#xff0c;里面还有很多我们不想展示给客户的东西怎么办…

源代码一定要加密!10款超级好用的源代码加密软件排行榜

在当今高度竞争的商业环境中&#xff0c;源代码不仅是软件产品的基础&#xff0c;更是企业的核心资产之一。保护源代码免受未经授权的访问和盗窃至关重要。为此&#xff0c;许多企业采用源代码加密软件来为这一重要资产增加额外的安全层。以下是2024年企业通用的十大源代码加密…

SNMP入门笔记

简介 SNMP是英文"Simple Network Management Protocol"的缩写&#xff0c;中文意思是"简单网络管理协议"。SNMP是一种简单网络管理协议&#xff0c;它属于TCP/IP五层协议中的应用层协议&#xff0c;用于网络管理的协议。SNMP主要用于网络设备的管理。由于…

session、cookie、token概念介绍

一、Cookie 1、cookie介绍 Cookie是网站为了辨别用户身份而储存在用户本地终端&#xff08;Client Side&#xff09;上的小型文本文件。 作用&#xff1a;Cookie主要用于保存用户登录信息、浏览记录等&#xff0c;以便用户再次访问时能够自动识别并提供个性化服务。存储位置…

汽车电子 -- python脚本组包软件版本号

python脚本组包软件版本号 import pandas as pd import click import os import datetimedef cmdGetSwInfo():targetFilePath ../APP.htargetKeyWord #definetargetProgType PROJECT_TYPEtargetSoftware SOFTWARE_VERSIONtargetVersionInfo VERSION_INFO fileRead …

SEO优化:如何优化自己的文章,解决搜索引擎不收录的问题

可以使用bing的URL检查&#xff0c;来检查自己的文章是不是负荷收录准测&#xff0c;如果页面有严重的错误&#xff0c;搜索引擎是不会进行收录的&#xff0c;而且还会判定文章为低质量文章&#xff01; 检查是否有问题。下面的页面就是有问题&#xff0c;当然如果是误报你也可…

【与C++的邂逅】--- 类和对象(上)

Welcome to 9ilks Code World (๑•́ ₃ •̀๑) 个人主页: 9ilk (๑•́ ₃ •̀๑) 文章专栏&#xff1a; 与C的邂逅 本篇博客将讲解C中的类和对象&#xff0c;C是面向对象的语言&#xff0c;面向对象三大特性是封装,继承,多态。学习类和对象&#xff0c;我们可…

[数据集][目标检测]集装箱缺陷检测数据集VOC+YOLO格式4127张3类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;4127 标注数量(xml文件个数)&#xff1a;4127 标注数量(txt文件个数)&#xff1a;4127 标注…

echart改变legend样式及分页

legend: {type: "scroll",orient: horizontal, // 纵向&#xff0c;默认横向不用写pageIconColor: #1b9aee, //翻页下一页的三角按钮颜色pageIconInactiveColor: #7f7f7f, //翻页&#xff08;即翻页到头时&#xff09;// 配置滚动类型的图例pageTextStyle: {color: &…

C语言每日好题(3)

有任何不懂的问题可以评论区留言&#xff0c;能力范围内都会一一回答 #define _CRT_SECURE_NO_WARNING #include <stdio.h> #include <string.h> int main(void) {if ((strlen("abc") - strlen("abcdef")) > 0)printf(">\n")…

十三、OpenCVSharp的目标检测

文章目录 简介一、传统目标检测方法1. 基于滑动窗口的检测2. 特征提取与分类器结合(如 HOG + SVM)3. 级联分类器二、基于深度学习的目标检测1. YOLO 系列算法2. SSD 算法3. Faster R-CNN 算法三、深度学习目标检测模型的训练和部署四、目标检测的性能评估指标1. 准确率、召回…

C++_进阶:AVL树

文章目录 1. AVL树的概念2. AVL树节点的定义3. AVL树的插入4. AVL树的旋转4.1 右单旋4.2 左单旋4.3 左右双旋4.4 右左双旋 5.AVL树的验证6. AVL树模拟实现 1. AVL树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#…

git 学习--GitHub Gitee码云 GitLab

1 集中式和分布式的区别 1.1 集中式 集中式VCS必须有一台电脑作为服务器&#xff0c;每台电脑都把代码提交到服务器上&#xff0c;再从服务器下载代码。如果网络出现问题或服务器宕机&#xff0c;系统就不能使用了。 1.2 分布式 分布式VCS没有中央服务器&#xff0c;每台电脑…

JavaScript === 和 ==

JavaScript 中&#xff0c; 和 是比较操作符。 &#xff08;严格等于&#xff09; 功能&#xff1a;比较两个值是否相等&#xff0c;同时要求它们的类型也必须相同。示例&#xff1a; 5 5 // true&#xff0c;因为类型和数值都相同 5 5 // false&#xff0c;因…