加盟平台响应网站建设,宣威市网站建设,手机免费发布信息平台,网站版建设在 Web 开发中#xff0c;有时我们希望用户能够将网页上的 HTML 内容保存为 Word 文档#xff0c;以便更方便地分享和打印。
html样式 word文档 工具准备
1、 html-docx-js - npm
html-docx-js是一个 JavaScript 库#xff0c;用于将 HTML 内容转换为 Word 文档的格式。它…在 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 srchttps://cdn.jsdelivr.net/npm/html-docx-js/dist/html-docx.js/script
script srchttps://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/script2、创建一个导出方法该方法接受 HTML 内容作为参数并将其导出为 Word 文档。
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设置了stylewidth: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);// 将缩小后的图片导出为PNGresolve(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 htmlhtmlheadmeta http-equivContent-Type contenttext/html; charsetUTF-8/headbody${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 classfs-14 text-g ng-clickvm.daochu()导出/a
div classrow idresumeAllInfodiv classrow stylecolor:#205081;font-size:16px;border-bottom:1px solid #eee;margin-bottom: 15px;padding-bottom: 5px;基本信息/divdiv classrow stylevertical-align: middlespan stylefloat: left;margin-right:20pximg stylewidth:50px;height:50px ng-src{{ vm.resume.portraitUrl }} rw-default-img img-typeportrait alt头像/spanspanspan stylefont-size:16px;margin-right:20px{{ vm.resume.name }}/spanspan stylemargin-right:10px{{ vm.resume.phone }}/spanspan ng-ifvm.resume.wechat stylemargin-right:10pxspan stylemargin-right:10px|/span{{ vm.resume.wechat }}/spanspan ng-ifvm.resume.qq stylemargin-right:10pxspan stylemargin-right:10px|/span{{ vm.resume.qq }}/spanspan ng-ifvm.resume.email stylemargin-right:10pxspan stylemargin-right:10px|/span{{ vm.resume.email }}/span/span/div
/divscript……vm.daochudaochu;function daochu() {// 获取要导出的HTML字符串const htmlElement document.getElementById(resumeAllInfo);//调用导出方法exportHtmlToDocx(htmlElement, my-exported-document.docx);}
/script
