vue使用html-docx-js 实现 html内容转word下载

借鉴的是点击这里这篇，我自己引入之后有些报错和问题，修改了一下。

npm install html-docx-js
npm install file-saver

 <!-- 包容要转为word的html盒子 -->
<div class="export-box">
    <!-- 插入html的内容 -->
</div>
<button @click="gohtml"></button>
<script setup lang="ts">
import htmlDocx from 'html-docx-js/dist/html-docx';
import saveAs from 'file-saver';
 
// html转为word
const gohtml = () => {
    //.export-box 需要转word的最大dom盒子的类名
    const app = document.querySelector('.export-box');
    const cloneApp = app.cloneNode(true);
    const canvases = app.getElementsByTagName('canvas');
    const cloneCanvases = cloneApp.getElementsByTagName('canvas');
 
    const promises = Array.from(canvases).map((ca, index) => {
        return new Promise((res) => {
            const url = ca.toDataURL('image/png', 1);
            const img = new Image();
            img.onload = () => {
                URL.revokeObjectURL(url);
                res();
            };
            img.src = url;
            // 生成img插入clone的dom的canvas之前
            cloneCanvases[index].parentNode.insertBefore(
                img,
                cloneCanvases[index],
            );
        });
    });
    // 移除原来的canvas
    const cloneCanvas = cloneApp.getElementsByTagName('canvas');
    Array.from(cloneCanvas).forEach((ca) => ca.parentNode.removeChild(ca));
 
    Promise.all(promises).then(() => {
        convertImagesToBase64(cloneApp);
        console.log(document.head.outerHTML);
        const converted = htmlDocx.asBlob(`
      <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>
      ${document.head.outerHTML}
      </head>
      <body>
      ${cloneApp.outerHTML}
      </body>
      </html>`);
        saveAs(converted, 'test.docx');
    });
};
 
const convertImagesToBase64 = (cloneApp) => {
    let regularImages = cloneApp.getElementsByTagName('img');
    let canvas = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    
    for (let index = 0; index < regularImages.length; index++) {
        canvas.width = regularImages[index].width;
        canvas.height = regularImages[index].height;
        ctx.drawImage(
            regularImages[index],
            0,
            0,
            regularImages[index].width,
            regularImages[index].height,
        );
        let ext = regularImages[index].src
            .substring(regularImages[index].src.lastIndexOf('.') + 1)
            .toLowerCase();
        let dataURL = canvas.toDataURL('image/' + ext);
        regularImages[index].setAttribute('src', dataURL);
    }
    canvas.remove();
};
</script>复制

import htmlDocx from 'html-docx-js/dist/html-docx';

一开始引入html-docx-js时，会报node_modules里一个with(obj)的错，把with()语句和花括号删除掉，再把里面的变量加上obj. 就可以了。如下

 with(obj){
__p += '------=mhtDocumentPart\nContent-Type: ' +
((__t = ( contentType )) == null ? '' : __t) +
'\nContent-Transfer-Encoding: ' +
((__t = ( contentEncoding )) == null ? '' : __t) +
'\nContent-Location: ' +
((__t = ( contentLocation )) == null ? '' : __t) +
'\n\n' +
((__t = (encodedContent )) == null ? '' : __t) +
'\n';
}
 
//改为
 
__p += '------=mhtDocumentPart\nContent-Type: ' +
((__t = ( obj.contentType )) == null ? '' : __t) +
'\nContent-Transfer-Encoding: ' +
((__t = ( obj.contentEncoding )) == null ? '' : __t) +
'\nContent-Location: ' +
((__t = ( obj.contentLocation )) == null ? '' : __t) +
'\n\n' +
((__t = ( obj.encodedContent )) == null ? '' : __t) +
'\n';复制

.export-box div里也可以放echarts图表

标签

vue使用html-docx-js 实现 html内容转word下载

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

前端提高篇（102）：jQuery高级方法callbacks、deferred

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

文本，wangEditor5展示HTML无样式，wangEditor5如何看源码，Ctrl U看CSS文件，代码高亮，Prism.js可以实现，解决方法，参考网页源代码的写法

HTML/SSM-实验室预约管理系统-99299（免费领源码开发文档）可做计算机毕业设计JAVA、PHP、爬虫、APP、小程序、C#、C 、python、数据可视化、大数据、全套文案

【简单html静态网页代码】制作一个简单HTML宠物网页（HTML CSS）

模仿电影中黑客电脑界面，html装逼代码

【html】新建一个html并且在浏览器运行

SSM基于html的网上购物系统2nluo 在线充值

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!-- 包容要转为word的html盒子 -->
	<div class="export-box">
	<!-- 插入html的内容 -->
	</div>
	<button @click="gohtml"></button>
	<script setup lang="ts">
	import htmlDocx from 'html-docx-js/dist/html-docx';
	import saveAs from 'file-saver';

	// html转为word
	const gohtml = () => {
	//.export-box 需要转word的最大dom盒子的类名
	const app = document.querySelector('.export-box');
	const cloneApp = app.cloneNode(true);
	const canvases = app.getElementsByTagName('canvas');
	const cloneCanvases = cloneApp.getElementsByTagName('canvas');

	const promises = Array.from(canvases).map((ca, index) => {
	return new Promise((res) => {
	const url = ca.toDataURL('image/png', 1);
	const img = new Image();
	img.onload = () => {
	URL.revokeObjectURL(url);
	res();
	};
	img.src = url;
	// 生成img插入clone的dom的canvas之前
	cloneCanvases[index].parentNode.insertBefore(
	img,
	cloneCanvases[index],
	);
	});
	});
	// 移除原来的canvas
	const cloneCanvas = cloneApp.getElementsByTagName('canvas');
	Array.from(cloneCanvas).forEach((ca) => ca.parentNode.removeChild(ca));

	Promise.all(promises).then(() => {
	convertImagesToBase64(cloneApp);
	console.log(document.head.outerHTML);
	const converted = htmlDocx.asBlob(`
	<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>
	${document.head.outerHTML}
	</head>
	<body>
	${cloneApp.outerHTML}
	</body>
	</html>`);
	saveAs(converted, 'test.docx');
	});
	};

	const convertImagesToBase64 = (cloneApp) => {
	let regularImages = cloneApp.getElementsByTagName('img');
	let canvas = document.createElement('canvas');
	let ctx = canvas.getContext('2d');

	for (let index = 0; index < regularImages.length; index++) {
	canvas.width = regularImages[index].width;
	canvas.height = regularImages[index].height;
	ctx.drawImage(
	regularImages[index],
	0,
	0,
	regularImages[index].width,
	regularImages[index].height,
	);
	let ext = regularImages[index].src
	.substring(regularImages[index].src.lastIndexOf('.') + 1)
	.toLowerCase();
	let dataURL = canvas.toDataURL('image/' + ext);
	regularImages[index].setAttribute('src', dataURL);
	}
	canvas.remove();
	};
	</script>

	with(obj){
	__p += '------=mhtDocumentPart\nContent-Type: ' +
	((__t = ( contentType )) == null ? '' : __t) +
	'\nContent-Transfer-Encoding: ' +
	((__t = ( contentEncoding )) == null ? '' : __t) +
	'\nContent-Location: ' +
	((__t = ( contentLocation )) == null ? '' : __t) +
	'\n\n' +
	((__t = (encodedContent )) == null ? '' : __t) +
	'\n';
	}

	//改为

	__p += '------=mhtDocumentPart\nContent-Type: ' +
	((__t = ( obj.contentType )) == null ? '' : __t) +
	'\nContent-Transfer-Encoding: ' +
	((__t = ( obj.contentEncoding )) == null ? '' : __t) +
	'\nContent-Location: ' +
	((__t = ( obj.contentLocation )) == null ? '' : __t) +
	'\n\n' +
	((__t = ( obj.encodedContent )) == null ? '' : __t) +
	'\n';

vue使用html-docx-js 实现 html内容转word下载

微信扫一扫：分享