【Js】导出 HTML 为 Word 文档 - ToB企服应用市场:ToB评测及商务社交产业平台

<script src="https://cdn.jsdelivr.net/npm/html-docx-js/dist/html-docx.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver/dist/FileSaver.min.js"></script>
<script src="./js/html-docx.js"></script>
<script src="./js/FileSaver.min.js"></script>

复制代码

const exportHtmlToDocx = (htmlContent, fileName = 'exported-document.docx') => {
// convertImagesToBase64(htmlContent);
// 将HTML元素转换为字符串，并提取图片
const regularImages = Array.from(htmlContent.querySelectorAll('img'));
const imagePromises = regularImages.map(imgElement => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const imgObj = new Image();
imgObj.crossOrigin = 'Anonymous'; // 如果图片需要跨域访问
imgObj.src = imgElement.src;
return new Promise((resolve, reject) => {
imgObj.onload = () => {
//canvas 图片缩小到固定大小
//如果页面上img设置了style="width:50px;height:50px"，已页面设置的为主，如果没有设置就是默认图片的大小
canvas.width = imgElement.width || imgObj.width;// 想要的canvas固定宽度
canvas.height = imgElement.height || imgObj.height;// 想要的canvas固定高度
//计算缩放比例
var ratio = Math.min(canvas.width / imgObj.width, canvas.height / imgObj.height);
var scaledWidth = imgObj.width * ratio;
var scaledHeight = imgObj.height * ratio;
var offsetX = (canvas.width - scaledWidth) / 2;
var offsetY = (canvas.height - scaledHeight) / 2;
// 绘制缩小后的图片
ctx.drawImage(imgObj, 0, 0, imgObj.width, imgObj.height, offsetX, offsetY, scaledWidth, scaledHeight);
// 将缩小后的图片导出为PNG
resolve(canvas.toDataURL('image/png'));
};
imgObj.onerror = reject;
});
});
Promise.all(imagePromises).then(dataUris => {
dataUris.forEach((dataUri, i) => {
regularImages[i].src = dataUri;
});
// 构建包含 HTML 内容的完整 HTML 文档字符串
const fullHtmlContent = `
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
${htmlContent.outerHTML}
</body>
</html>
`;
// 使用 html-docx-js 将 HTML 转换为 Word 文档的 Blob 对象
const converted = htmlDocx.asBlob(fullHtmlContent);
// 使用 file-saver 保存 Blob 对象为 Word 文档文件
saveAs(converted, fileName);
});
};

复制代码

//html页面上
<a class="fs-14 text-g" ng-click="vm.daochu()">导出</a>
<div class="row" id="resumeAllInfo">
<div class="row" style="color:#205081;font-size:16px;border-bottom:1px solid #eee;margin-bottom: 15px;padding-bottom: 5px;">基本信息</div>
<div class="row" style="vertical-align: middle">
<span style="float: left;margin-right:20px">
<img style="width:50px;height:50px" ng-src="{{ vm.resume.portraitUrl }}" rw-default-img img-type="portrait" alt="头像">
</span>
<span>
<span style="font-size:16px;margin-right:20px">{{ vm.resume.name }}</span>
<span style="margin-right:10px">{{ vm.resume.phone }}</span>
<span ng-if="vm.resume.wechat" style="margin-right:10px">
<span style="margin-right:10px">|</span>{{ vm.resume.wechat }}</span>
<span ng-if="vm.resume.qq" style="margin-right:10px">
<span style="margin-right:10px">|</span>{{ vm.resume.qq }}</span>
<span ng-if="vm.resume.email" style="margin-right:10px">
<span style="margin-right:10px">|</span>{{ vm.resume.email }}</span>
</span>
</div>
</div>
<script>
……
vm.daochu=daochu;
function daochu() {
// 获取要导出的HTML字符串
const htmlElement = document.getElementById('resumeAllInfo');
//调用导出方法
exportHtmlToDocx(htmlElement, 'my-exported-document.docx');
}
</script>

复制代码