在 Web 开发中，有时我们希望用户能够将网页上的 HTML 内容保存为 Word 文档，以便更方便地分享和打印。
html样式
word文档
工具准备
1、 html-docx-js - npm
html-docx-js是一个 JavaScript 库，用于将 HTML 内容转换为 Word 文档的格式。它提供了简单的 API，使得在浏览器环境中可以轻松地生成并导出 Word 文档
2、 file-saver - npm
file-saver是一个 JavaScript 库，用于在浏览器中保存文件。它简化了通过 Blob 对象保存文件的过程，并提供了一个直观的 API。
代码实现
1、先引入这两个库：可以通过 npm 安装，也可以直接使用 CDN 引入，还可以下载到本地项目引用。
<!-- 使用 npm 安装 --> <!-- npm install html-docx-js file-saver --> <!-- 或者直接使用 CDN 引入 --> <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> <!-- 或者访问上面CDN链接，保存到本地，放在项目里引用 --> <script src="./js/html-docx.js"></script> <script src="./js/FileSaver.min.js"></script>
2、创建一个导出方法，该方法接受 HTML 内容作为参数，并将其导出为 Word 文档。
const exportHtmlToDocx = (htmlContent, fileName = 'exported-document.docx') => { // 处理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固定高度 //在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(imgUrls => { imgUrls.forEach((imgUrl, i) => { regularImages[i].src = imgUrl; }); // 构建包含 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); }); };
3、在应用中调用上述导出方法，并传入想导出的 HTML 内容。
注意：html结构需要包含style样式，引入css文件样式不生效的
//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>
