vue在线预览word踩坑日记

项目一直也来也是下载word,但是就在最近,突然提了一个新的需求,要求能在线阅览word文档,和下载文档
整整一天半的时间…全在踩坑,特此记录下,帮助后续小伙伴积极避坑

收费的…直接跳过
剩下的遇到的…于是乎

方案一: docx-preview

通过vue的插件 docx-preview,可以完成docx的预览,需要后端配合,将文件流转换为blob流,前端运用插件内的方法,直接渲染docx流

• 对应文档链接:

https://blog.csdn.net/weixin_54000091/article/details/124606368

• git相似方案:

   https://gitee.com/tomiaa/vue-preview-word-file-docx#http://tomiaa.gitee.io/vue-preview-word-file-docx/#/

• 缺陷: 只支持docx,不支持doc
  但是我没用,为啥我没用呢?!不光是因为不支持doc…而是后端人员不太配合,说不会转bolb流… 卒

方案二: mammoth

• 对应文档链接:

 https://blog.csdn.net/qq_42697806/article/details/125423742

• 缺陷: docx文档预览(只能转换.docx文档，转换过程中复杂样式被忽，居中、首行缩进等)

方案三:用docx云服务的在线预览,

但是后端提供的文件地址是要公开可访问的链接直接放弃

• 对应文档链接:

 https://blog.csdn.net/weixin_42190844/article/details/120869882

方案四: 直接用iframe 访问,当当当~~跨域…

.

方案五: 后端处理然后前端访问,后端将word转换成pdf,前端直接iframe读取

1. 对应文档链接:

 https://www.jb51.net/article/231444.htm

后端特殊注意一点 response.setHeader(“Content-Disposition”, “inline; filename=111.pdf”);

content-disposition 指示如何处理响应内容。
inline：直接在页面显示
attchment：以附件形式下载