前端页面导出word

server/2024/12/16 20:30:22/

html-docx-js bug:
vite使用html-docx.js会报错,点击下载上方文件替换即可

正文

npm install html-docx-js -S
npm install file-saver -S
<template><div id="managerReport">word内容......</div>
</template><script><a-button type="primary" @click="wordDownload"> 导出 </a-button>word">function wordDownload() {word">const htmlContent = document.getElementById('managerReport');// 查找并修改表格的样式word">const tables = htmlContent.querySelectorAll('table');tables.forEach((table) => {table.style.borderCollapse = 'collapse';table.style.width = '100%';table.querySelectorAll('td, th').forEach((cell, index) => {word">if (cell) {cell.style.border = '1px solid black';cell.style.padding = '8px';}});});//去除<br>标签,内容加到<div>标签内word">const brs = htmlContent.querySelectorAll('br');brs.forEach((br) => {word">const parent = br.parentNode; //获取父节点word">let textNode = br.previousSibling; //前一个兄弟节点// while (textNode && textNode.nodeType !== Node.TEXT_NODE) {//   textNode = textNode.previousSibling;        //循环查找,直到找到一个文本节点或没有更多的兄弟节点// }word">if (textNode && textNode.nodeType === Node.TEXT_NODE && textNode.textContent.trim()) {//找到文本节点,并且内容不为空word">const div = document.createElement('div');div.textContent = textNode.textContent;parent.insertBefore(div, br);parent.removeChild(textNode); //移除原有的文本节点,避免内容重复} word">else {word">const div = document.createElement('div');div.innerHTML = '&nbsp;';parent.insertBefore(div, br);}parent.removeChild(br);});word">const htmlContentCopy = htmlContent.cloneNode(true);word">const imgs = htmlContentCopy.querySelectorAll('img');imgs.forEach((img) => {word">let docxWidth = 620;word">if (img.width > docxWidth) {img.height = (img.height * docxWidth) / img.width;img.width = docxWidth;}});// 将HTML转换为Blob对象word">const blob = asBlob(htmlContentCopy.innerHTML);saveAs(blob, `aaaaa.docx`);}</script>

http://www.ppmy.cn/server/150718.html

相关文章

HTTP域RPC

HTTP&#xff08;超文本传输协议&#xff09;和RPC&#xff08;远程过程调用&#xff09;是两种不同的通信协议&#xff0c;它们在网络通信中扮演着重要的角色。以下是HTTP和RPC的区别和关系的表格展示&#xff1a; 特性HTTPRPC定义一种用于传输超文本的应用层协议&#xff0c…

文件上传之黑名单检测

一般情况下&#xff0c;代码文件里会有一个数组或者列表&#xff0c;该数组或者列表里会包含一些非法的字符或者字符串&#xff0c;当数据包中含有符合该列表的字符串时&#xff0c;即认定该数据包是非法的。 ​​ 一.如何判断是否为黑名单检测 黑名单是有限的&#xff0c;可以…

Python 3 和 JSON 数据格式

Python 3 和 JSON 数据格式 Python 3 是一种广泛使用的编程语言&#xff0c;以其简洁明了的语法和强大的功能而闻名。JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;易于人阅读和编写&#xff0c;同时也易于机器解析和生成。…

AIGC 013-CoT用思维链挖掘自回归语言模型的潜在能力

AIGC 013-CoT用思维链挖掘自回归语言模型的潜在能力 文章目录 0 论文工作1 论文方法2 实验结果 0 论文工作 纯自回归式语言模型&#xff0c;本来并不具备优秀推理能力&#xff0c;特别是在数学问题的推理。但是现在的生成模型是能实现一些数学的推理的。研究者认为当模型足够大…

深入理解 XPath:XML 和 HTML 文档的利器

XPath&#xff08;XML Path Language&#xff09;是一种用于在 XML 和 HTML 文档中定位节点的语言。它常用于 XML 解析、Web 数据抓取&#xff08;如 Selenium 或 Scrapy&#xff09;以及配置文件解析。本文将带你深入了解 XPath 的语法、功能及其在实际中的应用。 目录 一、什…

Debezium OracleErrorHandler 分析

Debezium OracleErrorHandler 分析 目录 1. 概述2. 主要功能3. 实现分析4. 使用场景5. 示例6. 最佳实践7. 总结1. 概述 OracleErrorHandler 是 Debezium Oracle 连接器中的错误处理组件,负责处理连接器运行过程中遇到的各种异常情况。它主要用于: 判断错误是否可重试处理数…

revit转gltf,revit转3dtiles,如何将Revit模型转为3DTiles格式并在Cesiumjs中高效可视化

Revit模型导出gltf、glb与3dtiles有多种方式&#xff0c;但一般的商业工具收费普遍较高&#xff1a;Cesiumlab导出3dTile格式数据&#xff0c;Cesiumlab暂时可试用3天&#xff0c;会员版收费每年800&#xff1b;BimAngleEngine导出3dTile格式数据BimAngleEngine暂时可试用30天&…

架构未来:深入探索最热门的编程语言开发框架

开发框架组件简介 开发框架是程序员用来加速开发并确保代码质量的基础组件之一。在不同的编程语言中&#xff0c;开发框架为开发人员提供了丰富的工具、库和最佳实践&#xff0c;帮助构建高效、可维护和安全的应用程序。本文将介绍几种常见编程语言的开发框架组件&#xff0c;…