html-docx-js和file-saver实现html导出word

依赖html-docx-js，file-saver，html2canvas

import { asBlob } from 'html-docx-js/dist/html-docx';
import { saveAs } from 'file-saver';
import html2Canvas from 'html2canvas';const handleImageToBase64 = (cloneEle) => {let imgElements = cloneEle.getElementsByTagName('img');let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');Array.from(imgElements).forEach((item) => {canvas.width = item.width;canvas.height = item.height;ctx.drawImage(item, 0, 0, item.width, item.height);let ext = item.src.substring(item.src.lastIndexOf('.') + 1).toLowerCase();let dataURL = canvas.toDataURL('image/' + ext);item.setAttribute('src', dataURL);});canvas.remove();
};const handleCanvasToImage = (cloneEle) => {const canvasElements = cloneEle.getElementsByTagName('canvas');const promises = Array.from(canvasElements).map((ca, index) => {return new Promise((resolve) => {const url = ca.toDataURL('image/png', 1);const img = new Image();img.onload = () => {URL.revokeObjectURL(url);resolve();};img.src = url;// 生成img插入clone的dom的canvas之前canvasElements[index].parentNode.insertBefore(img, canvasElements[index]);});});// 移除原来的canvasArray.from(canvasElements).forEach((ca) => ca.parentNode.removeChild(ca));return promises;
};const handleSvgToImage = (cloneEle) => {const svgElements = cloneEle.getElementsByTagName('svg');Array.from(svgElements).forEach((svg) => {// 将SVG元素转换为PNG图片const img = new Image();img.src = 'data:image/svg+xml;base64,' + window.btoa(encodeURIComponent(svg.outerHTML).replace(/%([0-9A-F]{2})/g, function(match, p1) {return String.fromCharCode('0x' + p1);}));// 将图片插入到SVG元素的位置svg.parentNode.insertBefore(img, svg);// 移除原来的SVG元素svg.parentNode.removeChild(svg);});
};const handleCodeToImage = (ele, cloneEle) => {let codeElements = ele.querySelectorAll('pre code');let cloneCodeElements = cloneEle.querySelectorAll('pre code');const promises = Array.from(codeElements).map((item, index) => {return new Promise((resolve) => {const pre = item.parentNode;html2Canvas(pre, {imageTimeout: 2000,logging: false,scrollY: 0,scrollX: 0,scale: window.devicePixelRatio * 1.2, // 添加的scale 参数width: ele.clientWidth / 1.5,allowTaint: false,useCORS: true, // 开启跨域}).then(canvas => {// 将 Canvas 转换为图片let dataURL = canvas.toDataURL('image/png');// 创建一个新的 <img> 元素并设置其 src 属性const img = new Image();img.src = dataURL;// 将图片插入到SVG元素的位置const clonePre = cloneCodeElements[index].parentNode;clonePre.parentNode.insertBefore(img, clonePre);// 移除原来的SVG元素clonePre.parentNode.removeChild(clonePre);resolve();});});});return promises;
};// 表格虚线 向右偏移10px左右
const handleTableStyle = (cloneEle) => {let tableElements = cloneEle.getElementsByTagName('table');Array.from(tableElements).forEach((table) => {table.style.borderCollapse = table.style.borderCollapse || 'collapse';table.border = table.border || '1';table.style.marginLeft = '10px';});let thElements = cloneEle.getElementsByTagName('th');Array.from(thElements).forEach((th) => {th.style.backgroundColor = '#f0f0f0';});
};const getCss = () => {return `body {color: #383c4a;font-family: -apple-system, blinkmacsystemfont, "Segoe UI", helvetica, arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 12px;word-wrap: break-word;}`;
};const handleHtml = async (ele, cloneEle) => {const canvasPromises = handleCanvasToImage(cloneEle);handleSvgToImage(cloneEle);const codePromises = handleCodeToImage(ele, cloneEle);await Promise.all(canvasPromises);await Promise.all(codePromises);handleImageToBase64(cloneEle);handleTableStyle(cloneEle);let cssString = '';cssString = getCss();const innerHtml = cloneEle.outerHTML// strong在word中不生效问题.replace(/<strong class="(.*?)">(.*?)<\/strong>/g, '<b class="$1">$2</b>').replace(/<mark/g, '<span').replace(/<\/mark>/g, '</span>');const htmlString = `<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:w="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40"><head><style type="text/css">${cssString}</style> </head><body>${innerHtml}</body></html>`;return htmlString;
};export default function exportWord({ selector, name = 'export' }) {if (!selector) return Promise.reject();// eslint-disable-next-line no-async-promise-executorreturn new Promise(async (resolve) => {const ele = document.querySelector(selector);const cloneEle = ele.cloneNode(true);const htmlString = await handleHtml(ele, cloneEle);const converted = asBlob(htmlString);saveAs(converted, `${name}.docx`);resolve();});}

页面调用

exportWord({selector: '.report-container'});

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

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

相关文章

Elasticsearch集群配置-节点职责划分 Hot Warm 架构实践

Elasticsearch集群配置-节点职责划分 Hot Warm 架构实践

前言 本文主要讲了ES在节点部署时可以考虑的节点职责划分&#xff0c;如果不考虑节点部署&#xff0c;那么所有节点都会身兼数职&#xff08;master-eligible &#xff0c;data&#xff0c;coordinate等&#xff09;&#xff0c;这对后期的维护拓展并不利&#xff0c;所以本文…
阅读更多...
软件测试10 渗透性测试及验收测试

软件测试10 渗透性测试及验收测试

渗透性测试及验收测试 知识回顾 Web UI自动化测试 引入自动化测试需要满足的条件自动化测试流程简述自动化测试的关键技术Selenium页面元素定位方式 目标 了解安全测试的概念了解常见的安全漏洞了解安全测试流程及测试工具的使用理解验收测试的概念掌握Alpha测试和Beta测试…
阅读更多...
【React 】开发环境搭建详细指南

【React 】开发环境搭建详细指南

文章目录 一、准备工作1. 安装 Node.js 和 npm2. 选择代码编辑器 二、创建 React 项目1. 使用 Create React App2. 手动配置 React 项目 三、集成开发工具1. ESLint 和 Prettier2. 使用 Git 进行版本控制 在现代前端开发中&#xff0c;React 是一个非常流行的框架&#xff0c;用…
阅读更多...
【计算机毕业设计】866校企合作管理系统

【计算机毕业设计】866校企合作管理系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…
阅读更多...
Git处理Failed to connect to www.google.com port 80: Timed out

Git处理Failed to connect to www.google.com port 80: Timed out

Git处理Failed to connect to www.google.com port 80: Timed out 输入提交代码命令&#xff1a;git push -u origin master 报错&#xff1a;fatal: unable to access https://gitee.com/solitudeYu/gerenzhuye.git/: Failed to connect to www.google.com port 80: Timed ou…
阅读更多...
CentOS 7中安装Redis

CentOS 7中安装Redis

一、判断是否安装了gcc gcc --version 如果未安装&#xff0c;直接安装gcc环境 yum install -y gcc tcl 二、安装Redis cd /usr/local/ wget https://download.redis.io/releases/redis-7.2.0.tar.gz 解压redis-7.2.0.tar.gz文件 tar -zxvf redis-7.2.0.tar.gz cd re…
阅读更多...
在Mac M1上面使用Dockerfile打x86_64镜像

在Mac M1上面使用Dockerfile打x86_64镜像

问题 因为服务器上面的cpu架构上x86_64的&#xff0c;但是&#xff0c;我本地Mac M1是arm的&#xff0c;这样服务器就不能直接使用Mac M1打出来的docker镜像。通过如下命令可以查看服务器cpu架构&#xff1a; arch解决 在Mac M1上面打服务器需要x86_64的Docker镜像&#xff…
阅读更多...
AI数字人+城市交通大数据可视化平台，让交通管理与服务更简便、更智能

AI数字人+城市交通大数据可视化平台，让交通管理与服务更简便、更智能

如今&#xff0c;AI数字人作为科技革命和产业革命的重要驱动力&#xff0c;AI数字人接入城市交通大数据可视化平台&#xff0c;可以有效地将各硬件与业务系统进行深度融合&#xff0c;完成业务闭环。依托AI数字人的应用&#xff0c;使城市交通大数据可视化平台的使用复杂度大幅…
阅读更多...
我在Vscode学Java泛型（泛型设计、擦除、通配符）

我在Vscode学Java泛型（泛型设计、擦除、通配符）

Java泛型 一、泛型 Generics的意义1.1 在没有泛型的时候&#xff0c;集合如何存储数据1.2 引入泛型的好处1.3 注意事项1.3.1 泛型不支持基本数据类型1.3.2 当泛型指定类型&#xff0c;传递数据时可传入该类及其子类类型1.3.3 如果不写泛型&#xff0c;类型默认是Object 二、泛型…
阅读更多...
Elastic 数据分层策略：为弹性及高效的实施而优化

Elastic 数据分层策略：为弹性及高效的实施而优化

作者&#xff1a;来自 Elastic Michael Calizo, Tim Lee 在 Elastic&#xff0c;我们大多数成功的客户实施都是从单一用例开始的&#xff0c;旨在满足特定的业务需求。Elastic 最初被采用通常是因为开发人员欣赏它提供的功能。然而&#xff0c;由于其灵活性和可定制性&#xff…
阅读更多...
Ubuntu安装QQ教程

Ubuntu安装QQ教程

Ubuntu安装QQ教程 腾讯更新Linux版的QQ&#xff0c;这里安装一下&#xff1b; 首先&#xff0c;进入官网找到合适对应的安装包&#xff1b; QQLinux版本官网&#xff1a;https://im.qq.com/linuxqq/index.shtml 我们是ubuntu系统选择X86下的deb版本&#xff0c;如果是arm开…
阅读更多...
React 中 useState 语法详解

React 中 useState 语法详解

1. 语法定义 const [state, dispatch] useState(initData) state&#xff1a;定义的数据源&#xff0c;可视作一个函数组件内部的变量&#xff0c;但只在首次渲染被创造。 dispatch&#xff1a;改变state的函数&#xff0c;推动函数渲染的渲染函数&#xff0c;有非函数和函…
阅读更多...
ROS参数服务器增删改查实操C++

ROS参数服务器增删改查实操C++

ROS参数服务器增删改查实操C 创建功能包参数服务器新增&#xff08;修改&#xff09;参数参数服务器获取参数参数服务器删除参数 ROS通信机制包括话题通信、服务通信和参数服务器三种通信方式&#xff0c;各原理及代码实现如下表 功能博客链接说明VScode配置 ROS 环境VScode创建…
阅读更多...
【Vue实战教程】之Vuex状态管理详解

【Vue实战教程】之Vuex状态管理详解

Vuex状态管理 1 Vuex简介 1.1 什么是Vuex Vuex是一个专为Vue.js应用程序开发的状态管理工具。它采用了集中式存储管理应用的所有的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。 简单来说&#xff0c;Vuex是一个适用于在Vue项目开发时使用的状态管理…
阅读更多...
机器学习 | 回归算法原理——多项式回归

机器学习 | 回归算法原理——多项式回归

Hi&#xff0c;大家好&#xff0c;我是半亩花海。接着上次的最速下降法&#xff08;梯度下降法&#xff09;继续更新《白话机器学习的数学》这本书的学习笔记&#xff0c;在此分享多项式回归这一回归算法原理。本章的回归算法原理基于《基于广告费预测点击量》项目&#xff0c;…
阅读更多...
Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习多输入单输出时间序列预测

Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习多输入单输出时间序列预测

目录 效果一览基本介绍模型设计程序设计参考资料效果一览 基本介绍 Adaboost集成学习 | Matlab实现基于LSTM-Adaboost长短期记忆神经网络结合Adaboost集成学习时间序列预测（股票价格预测） 模型设计 步骤1: 数据准备 收集和整理历史数据。确保数据集经过适当的预处理，如归一…
阅读更多...
【人工智能】Transformers之Pipeline（五）：深度估计（depth-estimation）

【人工智能】Transformers之Pipeline（五）：深度估计（depth-estimation）

目录 一、引言 二、深度估计&#xff08;depth-estimation&#xff09; 2.1 概述 2.2 技术路径 2.3 应用场景 2.4 pipeline参数 2.4.1 pipeline对象实例化参数 2.4.2 pipeline对象使用参数 2.4 pipeline实战 2.5 模型排名 三、总结 一、引言 pipeline&#xff08…
阅读更多...
mysql JSON特性优化

mysql JSON特性优化

有朋友问到&#xff0c;mysql如果要根据json中的某个属性过滤&#xff0c;数据量大的话&#xff0c;性能很差&#xff0c;要如何提高性能&#xff1f; 为什么要用json串&#xff1f; 由于一些特定场景&#xff0c;mysql需要用到json串&#xff0c;例如文档&#xff0c;不同的…
阅读更多...
详解Stable Diffusion 原理图

详解Stable Diffusion 原理图

参考英文文献&#xff1a;The Illustrated Stable Diffusion – Jay Alammar – Visualizing machine learning one concept at a time. 在这个Stable Diffusion模型的架构图中&#xff0c;VAE&#xff08;变分自编码器&#xff09;模型对应的是图中的 E 和 D 部分。 具体来说…
阅读更多...
【BUG】已解决：NameError: name ‘python‘ is not defined

【BUG】已解决：NameError: name ‘python‘ is not defined

NameError: name ‘python‘ is not defined 目录 NameError: name ‘python‘ is not defined 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页&#xff0c;我是博主英杰&#xff0c;211科班出身&#xff0c;就职于…
阅读更多...
最新文章

Copyright @ 2022~2023