整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者 | 大澈
大家好，我是大澈！
遇到难题，可以进问答群，问题直接群里扔，完事总有人会陪你一起搞。
建立这个平台的初衷：
1、打造一个问答平台，一个仅包含前端问题的平台，让大家可以高效处理同样问题。
2、通过不断积累问题，去练习大家的个人逻辑思维，并顺便学习相关的知识点。
3、遇到难题，遇到有共鸣的问题，一起讨论，一起沉淀，一起成长。
ONE
需求分析，问题描述
一、需求
点击导出word按钮，将页面任意指定区域的内容，导出为word文档。
二、问题
1、如何获取指定内容？
2、如何将HTML内容转换为Word文档？
3、如何导出下载Word文档？
TWO
解决问题，答案速览
实现代码如下，复制粘贴即可直接使用。
如果你有时间，具体问题梳理、代码分析、知识总结，可见第三部分。
一、使用说明
参考网上使用最多的方式，使用 FileSaver.js 和 html-docx-js 库（或其它将HTML内容转换为Word文档的库）来在Vue组件中导出内容为Word文档。
但是这种方式只能在服务端实现，在浏览器端使用会报错，这是因为浏览器的安全策略限制了对文件系统的直接访问，以防止恶意脚本滥用用户的文件系统。
为了避免报错，您可以考虑以下解决方案：
1、服务器端导出【推荐】：将生成Word文档的逻辑放在服务器端，通过Vue组件向服务器发送请求，服务器生成并返回Word文档的下载链接或文件。
2、使用其他导出方式：考虑使用其他导出方式，例如将内容转换为PDF格式或生成HTML格式的文件，以避免浏览器限制。
3、考虑使用专门的Word文档生成库【导出复杂Word】：如果您需要在浏览器中生成复杂的Word文档，可以考虑使用专门的JavaScript库，例如docxtemplater或mammoth.js，它们提供了更完整的Word文档生成功能。
4、考虑使用原生的方式实现【导出简单Word】。即我们下面要说的，利用a元素的原生文件下载功能来实现Word导出。
二、代码实例
1、在assets文件夹下新建js文件夹，然后在js文件夹下新建文件exportToWord.js，把下面代码放进去。
// 导出Word
export const exportToWord = (id, name) => {
// 获取选中区域Html
const dom = document.getElementById(id)
const content = dom.innerHTML;
const convertedContent = convertToWordDocument(content);
// Html类型数据 转换为 文件类型数据
const blob = new Blob([convertedContent], { type: 'application/msword' });
// 下载Word文档
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = name+'.doc' || 'exported.doc';
link.click();
}
//完善Html格式
const convertToWordDocument = (content) => {
const header = `<!DOCTYPE html><html><head><meta charset='utf-8'><title>Exported Document</title></head><body>`;
const footer = `</body></html>`;
return `${header}${content}${footer}`;
}
2、在需要的组件中引入exportToWord函数，直接调用即可。函数接收两个参数，第一个是指定区域元素的id，第二个是导出Word文档的名称。
<template>
<div>
<div id="word_demo">
<h1>标题</h1>
<p style="color: green">绿色字</p>
<p style="color: red">红色字</p>
<p style="color: dodgerblue">蓝色字</p>
</div>
<button @click="downLoad('word_demo', '哈哈哈')">点击导出word</button>
</div>
</template>
<script>
import { exportToWord } from '@/assets/js/exportToWord'
export default {
methods: {
downLoad(id, name) {
exportToWord(id, name)
},
}
}
</script>THREE
问题解析，知识总结
一、如何获取指定内容？
这个比较简单，相信大家都会，这里简单提一下。
对于组件可以用ref，对于元素可以用id。
二、如何将HTML内容转换为Word文档？
通过new Blob对象，将Html类型数据转换为生成Word文档的二进制数据。
关于Blob对象：
1、简介：
Blob（Binary Large Object）是JavaScript中的一个接口，用于表示不可变的、原始数据的类似文件的对象。
它通常用于处理二进制数据，例如图像、音频、视频等。
Blob对象可以包含任意类型的数据，包括文本、数组缓冲区和其他Blob对象。
Blob对象在处理文件上传、数据传输和媒体处理等场景中非常有用。您可以将Blob对象发送到服务器、保存到本地文件系统或使用其他API进行进一步处理。
2、Blob对象的构造函数接受以下参数：
Blob(blobParts, options)：构造函数接受两个参数。
第一个参数blobParts是一个数组，其中包含将被包含在Blob对象中的数据。数组的元素可以是字符串、ArrayBuffer、ArrayBufferView、Blob对象或其他类似对象。
第二个参数options是一个可选的对象，用于指定Blob对象的属性。
在options参数中，可以使用以下属性：
type：指定Blob对象的MIME类型。默认值为空字符串。
endings：指定以何种方式标准化换行符。可能的值是transparent、native和\r\n。默认值是transparent。
3、以下是一些常用的Blob属性和方法：
属性：
Blob.size：返回Blob对象的字节大小。
Blob.type：返回Blob对象的MIME类型。
方法：
Blob.slice(start, end, contentType)：
创建并返回一个新的Blob对象，该对象包含原始Blob对象的指定字节范围。可选参数contentType用于指定新Blob对象的MIME类型。
Blob.arrayBuffer()：
返回一个Promise，该Promise解析为一个ArrayBuffer对象，其中包含Blob对象的整个内容。
Blob.text()：
返回一个Promise，该Promise解析为一个字符串，其中包含Blob对象的文本内容。
Blob.stream()：
返回一个ReadableStream对象，可以用于流式读取Blob对象的内容。
Blob.text()：
返回一个Promise，该Promise解析为一个字符串，其中包含Blob对象的文本内容。
Blob.stream()：
返回一个ReadableStream对象，可以用于流式读取Blob对象的内容。
三、如何导出下载Word文档？
通过a元素的 download 属性，来实现文件的导出下载。
在 HTML 中，a元素的 download 属性用于指定一个下载链接，告诉浏览器该链接是要被下载而不是在浏览器中打开。这样，当用户点击链接时，浏览器会弹出一个下载对话框，提示用户保存文件到本地设备。
download 属性的值可以是一个文件名，用于指定用户保存文件时的默认文件名。当用户点击下载链接时，浏览器会使用该值作为默认文件名，但用户仍然可以选择其他文件名保存。
请注意，download 属性并不是所有浏览器都支持的新特性。特别是在移动设备上，某些浏览器可能会忽略该属性并在浏览器中打开链接。因此，在使用 download 属性时，最好提供一个备用方案，例如在链接的文本或旁边添加一段说明，告诉用户右键点击链接并选择 "保存链接" 或类似选项来下载文件。
- END -
PDF 转Word 是一个非常非常普遍的需求，可谓人人忌危，为什么如此普遍的需求，却如此难行呢，还得看为什么会有这样的一个需求。
PDF文档遵循iOS32000的规范是由Adobe 公司推出的文档格式，之所以应用如此广泛，是因为PDF精确定位了每个字符的坐标、根据坐标绘制的各种形状，使用PDF格式传输和打印文档可以保证格式的一致性，然后很多PDF文件是可用于阅读，展示，打印，但编辑起来是非常困难，如格式调整，文字修改，样式调整等，那么就衍生了PDF 转Word这一历史性的需求，但因为两者之间采用的编码规范以及布局机制的完全不一致，导致转换起来会非常复杂，一般的工具不是格式错乱，就是内容错乱，很难达到客户的原生期望。
其难点在于建立从PDF基于元素位置的格式到Word基于内容的格式的映射。PDF文档实际并不存在段落、表格的概念，PDF转Word要做的就是将PDF文档中“横、竖线条围绕着文本”解析为Word的“表格”，将“文本及下方的一条横线”解析为“文本下划线”，等等。
两个工具两套规则，自古以来两个工具之间的兼容转换，除非是为一家所有，会有通用的标准和接口预留，达到很好的兼容性，但 Adobe和微软都是巨大的科技企业，且两款软件功能都是非常强大且覆盖面全，要做到完美的匹配所有规则更是非常苦难。
对于报表用户来说，很多用户会将报表理解为报告，报告自然会联想到Word，那么就很希望在页面中展示的内容能够成 Word 文件来进行存档，编辑等作用。
ActiveReportsJS 是一款前端的报表开发工具，不与后端关联，因此想要将展示的HTML 生成Word，研发团队经过一些调研发现整个过程会非常复杂非常困难，正如他们反馈：“不是一个sprint能解决的问题”，就PDF.js 背后都有强大的Mozilla支撑，更何况Word文档是依托微软的Office开发组件去生成的。
但在实际接触客户的时候，许多用户都会来询问相关内容包括如何用报表设计类似审批表、人事履历表、检测报告等很常见的Word报告。用户对结果都比较满意，但唯一用户不满的是报表结果只能生成pdf。这是传统，这也是核心需求，也是痛点。
本葡萄就有些很着急，于是不信这个邪，在前端工具如此丰富的情况下，竟没有一个这样可用的工具？
开始搜索，打开google，榨干全部脑汁的词汇量输入了我需要的关键词，搜索到了以下结果。
乍一看，第一条完全吻合，Node.js 虽说是服务端也不是不可以接受，只要有方案即可。
看着非常有戏。
代码简单：
但仔细看看代码，果然老天在为我们送东西的时候都在背后的标好了价格：
心想如果可以，付费就付费吧，毕竟我们也是做付费商业软件的专业er，版权意识还是需要有的。
点击登录，用谷歌账号登陆成功后，即可在项目中引用cloudmersive-convert-api-client 安装包。
该JS 库提供了将近几十种的API及Class用于处理转换不同的格式文件：除了将PDF转Word外，还有其他发的文件格式转换，使用起来也是非常简单，
可以识别本地的PDF 文件，转换结果：
因为整个转换API 只是CloudMersive 的一个API功能，整个产品还附加其他的安全检验等功能，因此产品是按月及并发数收费的。大家可自行搜索了解，不过他们网站倒是提供好了几个文件转换的工具非常好用，无需登录直接获取转换结果
通过搜索发现PDF对象流直接用JS 转换为Word 文件是非常困难的， 而且经过验证ARJS 导出PDF 文件可以用Word软件打开，那么突然想到是否可以找一个中间件，将PDF流直接转换为doc或docx格式，但搜索一番，尝试之后，只是在.pdf前面加了document.docx.pdf
该方法尝试失败。
跟技术大咖聊了之后，才发现pdf和word虽然本质都是二进制流，但内部的声明等都是各自文件特有的属性，因此不能直接转换，简而言之就是是什么文件流就只能保存什么文件流。且PDF 和 Word是两大技术公司背书，直接转换得用专业的工具，因此此路不通。
于是乎，退而求其次，HTML 是万能的，HTML 可以转万物， HTML 转PDF， HTML 转图片，HTML 转Excel等等等，那么 ActiveReportsJS 提供了可将报表导出为HTML 文件且格式完全一致，那么方法来了，我直接使用HTML 转 Word不是更方便些？Google搜索果然此类资料比PDF 转Word多了百倍，而且看代码也是操作非常简单：
只需3步骤：
1、将报表导出HTML
var pageReport = new ARJS.PageReport();
pageReport.load('./BandedReport.rdlx-json')
.then(function() { return pageReport.run() })
.then(function(pageDocument) { return HTMLExport.exportDocument(pageDocument) })2、加工HTML 代码增加office 标记
var header = "<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'>"
let reg=/<html>/;
console.log(reg.test(htmlcode));
var test= htmlcode.replace(reg,header);
var sourceHTML='data:application/vnd.ms-word;charset=utf-8,'+encodeURIComponent(test);3、 创建 a 标签，直接下载 doc格式
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = sourceHTML;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload); 看看结果：效果很Nice
两种转化结果总结如下：
通过一番尝试也算是有一个Workaround，考虑到报告类的报表一般以文本内容为主，样式也比较朴素，所以使用html到Word转换不失为一个快速简洁的方法，大部分需要保存为Word 还是为了进行二次编辑。本葡萄也在努力寻找HTML 转Word 样式保留的方法，有新的进展会给大家更新第二篇。
转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。微信公众号：“葡萄城社区”。
们经常会在网上查找资料，而大多文档下载都需要付费，有哪些方法能免费将网页转换成Word文档呢？下面一起来看一看吧。
1、直接复制
最简单的方法就是直接将网页中所需段落或文字选中后，然后右击并选择“复制”，再新建一个Word文档粘贴进去就可以了。
2、另存为
有一些资料网站做了限制，文字无法选择，或者选择之后也复制不了，那么我们可以先将其以网页进行保存。在网页任意处右击并选择“网页另存为”；
接着将网页以HTML文件形式保存到电脑桌面后，双击打开这个网页，就可以随意进行复制并且粘贴到Word中了，只是这个网页加载会比较慢，不太建议使用。
3、截图转文字
如果有些网页资料限制多，以上两种方式都无法操作，那我们可以将需要的页面内容进行截图保存，使用一些聊天工具的截图工具或电脑自带的屏幕截取都可以。
然后再使用转换工具将图片识别成文字就可以啦。我们可以使用speedpdf在线转换工具的图片转Word功能，不仅能识别文字，如果有图片，也能以原有格式转换成Word。
首先搜索Speedpdf进入在线转换后，选择列表中转换格式中的“JPG to Word ”；然后将所有保存的图片批量全部上传进行转换，这样就能将内容转到同一个Word文档中。
转换完成之后直接下载就可以打开Word文档了，是不是很方便，而且转换也是免费的哦，强烈推荐这种处理方式呢。
*请认真填写需求信息，我们会在24小时内与您取得联系。
