vue 预览 word

最近做的项目要求实现预览word, pdf，png等文件功能，pdf以及png都很简单，轻松百度搞定，但是word预览研究了好久，所以特此记录分享。

前端实现预览word分为两种，一种是上传前预览（也就是前端使用input或者组件等选择文件后直接预览，此时还没有上传给后端，我定义为纯前端预览），一种是上传后预览（就是文档已经上传到后端，通过后端给的文件流实现预览）

一、先说第一种的实现方式:

首先下载安装docx-preview，引入

npm install xlsx docx-preview --save

1. import { defaultOptions, renderAsync } from "docx-preview";
3. var docxx = require("docx-preview");

我这里使用的是element ui 上传组件

1. <el-upload
2.     class="upload-demo"
3.     action=""
4.     :http-request="myUpload"
5.     :show-file-list="false"
6.     >
7.     <span class = "uploadEnclosure">上传附件span>
8.     el-upload>

选择文件以后

1. myUpload(content){
2. console.log(content);
3. const downUrl = URL.createObjectURL(content.file)
4. const a = document.createElement('a');
5. this.$refs.selectFileNameBox.innerHTML = "";
6. this.$refs.selectFileNameBox.append(a);
7. a.innerHTML = content.file.name;
8. a.href = downUrl
9. a.download = content.file.name;
10. a.target = '_blank';
11. const addTypeArray = content.file.name.split(".");
12. const addType = addTypeArray[addTypeArray.length - 1];
13. console.log(addType);
15. this.uploadFileName = content.file.name;
16. this.uploadFileObj = content.file;
17. if (addType === "pdf") {
18. const url = URL.createObjectURL(content.file);
19. console.log(url);
20. this.xzbjPreviewIframeSrc = url;
21. this.xzbjIframeIsShow = true;
22. this.xzbjDialogPreviewDiv = false;
23. this.xzbjPreviewImgUrl = "";
24. this.xzbjDocPreviewFlag = false;
26. this.previewBoxStyle = "height:400px;position: relative;overflow:hidden;"
28. }
29. else if(addType === "doc" || addType === "docx" || addType === "word"){
30. console.log("word文件预览")
31. this.xzbjPreviewImgUrl = "";
32. this.xzbjPreviewIframeSrc = "";
33. this.xzbjDialogPreviewDiv = false;
34. this.xzbjDocPreviewFlag = true;
35. this.xzbjIframeIsShow = false;
37. // 将file转为buffer
38. let fr = new FileReader();
39. fr.readAsArrayBuffer(content.file);
40. fr.addEventListener("loadend",(e) => {
41. console.log("loadend---->", e)
42. let buffer = e.target.result;
43. this.docxRender(buffer);
44. },false);
49. }
50. //".rar, .zip, .doc, .docx, .xls, .txt, .pdf, .jpg, .png, .jpeg,"
51. else if (["png", "jpg", "jpeg","bmp"].includes(addType)) {
52. this.xzbjPreviewIframeSrc = "";
53. this.xzbjIframeIsShow = false;
54. this.xzbjDocPreviewFlag = false;
55. this.imgPreview(content.file);
57. this.previewBoxStyle = "height:400px;position: relative;overflow:auto;"
59. } else if (addType === "rar" || addType === "zip" || addType === "7z") {
60. this.filePreviewInfo = "请下载附件进行查看"
61. this.xzbjPreviewImgUrl = "";
62. this.xzbjPreviewIframeSrc = "";
63. this.xzbjDocPreviewFlag = false;
64. this.xzbjDialogPreviewDiv = true;
65. this.$message({
66. message: "该文件类型暂不支持预览",
67. type: "warning",
68. });
69. return false;
70. }else{
71. this.filePreviewInfo = "该文件类型暂不支持预览"
72. this.xzbjPreviewIframeSrc = "";
73. this.xzbjIframeIsShow = false;
74. this.xzbjDialogPreviewDiv = true;
75. this.xzbjPreviewImgUrl = "";
76. this.xzbjDocPreviewFlag = false;
77. this.$message({
78. message: "请仅允许上传后缀为pdf、doc、docx、word、jpg、png、bmp、rar、zip、7z的附件",
79. type: "warning",
80. });
81. }
82. }

1. // 渲染docx
2. docxRender(buffer) {
3. let bodyContainer = document.getElementById("demoDocContainer");
4. renderAsync(
5. buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
6. bodyContainer, // HTMLElement 渲染文档内容的元素,
7. null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
8. this.docxOptions // 配置
9. ).then(res => {
10. console.log("res---->", res)
11. })
12. },

下面是图片预览核心代码

1. imgPreview(file) {
2. // 看支持不支持FileReader
3. if (!file || !window.FileReader) return;
4. // console.log(/^image/.test(file.type), "---/^image/.test(file.type)")
5. if (/^image/.test(file.type)) {
6. // 创建一个reader
7. let reader = new FileReader();
8. // 将图片将转成 base64 格式
9. reader.readAsDataURL(file);
10. // 读取成功后的回调
11. reader.onload = ({ target }) => {
12. this.xzbjDialogPreviewDiv = false;
13. this.xzbjPreviewImgUrl = target.result; //将img转化为二进制数据
14. // console.log("target:", target);
16. };
17. }
18. },

这样就实现了纯前端预览word功能

二、接下来实现 配合后端预览word

根据后端返回的流预览word

1. request({
2.     method: "get",
3.     url: "/notice/noticeFileView",
4.     responseType: 'blob',
5.     params:{
6.     id:row.id
7.     },
8.     headers: {
9.     "Content-Type": 'application/json'
10.     },
11.     }).then(res=>{
12.     console.log(res,"---文件预览");
13.    
14.     if(row.suffix.includes("pdf")){
15.     this.previewPdfFn(res);
16.     // let blob = new Blob([res],{
17.     // type: 'application/pdf'
18.     // })
19.     // let url = window.URL.createObjectURL(blob);
20.     this.xqPreviewImgUrl = "";
21.     this.xqPreviewPdfUrl = this.previewPdfFn(res);
22.     this.xqPdfPreviewFlag = true;
23.     this.xqDocPreviewFlag = false;
24.     this.xqPerviewStyle = "height:600px;position: relative;overflow:hidden"
25.     }else if(row.suffix.includes("docx") || row.suffix.includes("doc")|| row.suffix.includes("word")){
26.     console.log("预览word")
27.     this.xqDocPreviewFlag = true;
28.     let blob = new Blob([res],{
29.     type: 'application/pdf'
30.     })
31.     this.$nextTick(()=>{
32.     console.log(this.$refs.xqDocContainer,"---this.$refs.xqDocContainer")
33.     docxx.renderAsync(blob, this.$refs.xqDocContainer)
34.     })
35.    
36.     } else if (row.suffix === ".rar" || row.suffix === ".zip" || row.suffix === "7z") {
37.     this.xqDocPreviewFlag = false;
38.     this.xzbjPreviewImgUrl = "";
39.     this.xzbjPreviewIframeSrc = "";
40.     this.$message({
41.     message: "该文件类型暂不支持预览",
42.     type: "warning",
43.     });
44.     return false;
45.     }else if([".png", ".jpg", ".jpeg",".bmp"].includes(row.suffix)){
46.     let blob = new Blob([res],{
47.     type: 'application/pdf'
48.     })
49.     console.log(blob,"---blob")
50.     let url = window.URL.createObjectURL(blob);
51.     this.xqPreviewImgUrl = url;
52.     this.xqPdfPreviewFlag = false;
53.     this.xqDocPreviewFlag = false;
54.     this.xqPreviewPdfUrl = "";
55.     this.xqPerviewStyle = "height:600px;position: relative;overflow:auto"
56.     }
57.    
58.     this.xqDialogPreviewDiv = false;
59.     }).catch(err=>{
60.     console.log(err,"--文件预览失败")
61.     })

完毕

下面是参考链接：

https://www.jianshu.com/p/8e1e90570c52 预览word excel

https://blog.csdn.net/kaimo313/article/details/127012225 vue里使用docx-preview预览docx文件

https://volodymyrbaydalka.github.io/docxjs/

最后是一个好友赠送的组件

3. <script>
4. import { defaultOptions, renderAsync } from "docx-preview";
5. console.log(defaultOptions);
6. export default {
7. name: 'DocxPreview',
8. data () {
9. return {
10. docxOptions: {
11. className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀
12. inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
13. ignoreWidth: false, // boolean：禁用页面的渲染宽度
14. ignoreHeight: false, // boolean：禁止渲染页面高度
15. ignoreFonts: false, // boolean：禁用字体渲染
16. breakPages: true, // boolean：在分页符上启用分页
17. ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
18. experimental: false, // boolean：启用实验功能（制表符停止计算）
19. trimXmlDeclaration: true, // boolean：如果为true，解析前会从​​ xml 文档中移除 xml 声明
20. useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
21. useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
22. showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
23. debug: false, // boolean：启用额外的日志记录
24. }
25. };
26. },
27. methods: {
28. getFile(){
29. this.handlePreview()
30. },
31. handlePreview() {
32. let file = document.getElementById("file").files[0];
33. console.log(file);
34. // 将file转为buffer
35. let fr = new FileReader();
36. fr.readAsArrayBuffer(file);
37. fr.addEventListener("loadend",(e) => {
38. console.log("loadend---->", e)
39. let buffer = e.target.result;
40. this.docxRender(buffer);
41. },false);
42. },
43. // 渲染docx
44. docxRender(buffer) {
45. let bodyContainer = document.getElementById("bodyContainer");
46. renderAsync(
47. buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
48. bodyContainer, // HTMLElement 渲染文档内容的元素,
49. null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
50. this.docxOptions // 配置
51. ).then(res => {
52. console.log("res---->", res)
53. })
54. }
55. },
56. };
57. script>

结束啦，每天进步一点点，早日成为大神。啦啦啦