应用场景:
通过vue2实现对于word文档的下载功能（可自定义需要下载的word文档内容）
技术选情:
1.通过a标签进行对于原有的服务器oss上具有的word文档进行下载（只适用于oss以存在的word文档）
2.通过iframe将进行对于文档的一个操作
3.通过自定义方法进行对于内容的ref进行innerHtml的操作进行下载
技术选择:
由于操作以及需求的限制选择3
技术代码：
1.在assets 新建js文件夹，新建exportToWord.js
2.exportToWord.js内容如下:
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};
}
3.在需要引入组件的地方进行
import { exportToWord } from '@/assets/js/exportToWord'
methods:{
sublimt(){
exportToWord('wordInfo', 'word文档标题')
}
}
代码可直接使用，记录只是为了自己在寻求方案时踩过很多坑，为同行提供快捷的代码操作
网友评论