js实现在线预览(PC)图片(jpg、png)、pdf、excel（xlsx）、docx

js实现图片预览

参考：添加链接描述

1. 图片预览

   本来用的是element-plus自带的组件el-image，但是去不掉缩略图，所以换成了el-imag-viewer组件（图片可拖拽），由于用的vite没有require方法，需要自己处理一下图片才能显示。

   参考1：巧用element-ui自带隐藏的图片查看器el-image-viewer浏览图片(附兼容IE骚操作)

   参考2：vue3中使用require导入图片

2. pdf预览

   用iframe自带的:src="url"属性显示不出来pdf，未找到原因，后面绑了一个ref="pdfRef"，使用pdfRef.value.setAttribute('src',url)可以正常显示出pdf文件。

   参考：vue 在线预览 word ，Excel，pdf，图片 数据流 内网文件流 亲测有效（word 目前支持docx文件以及doc文件（doc需要后端处理））

3. Excel预览（Docx预览一样的）

   xlsx插件无问题，但是需要将arraybuffer转成文件流再做处理才可以，我没用XLSX插件，用的是vue-office插件（没有使用fetch，用的常规的post请求方式，则需要将arraybuffer转成文件流才能显示出来，对了，不能忘记设置样式高度，否则也显示不出来）。

   注意：vue-office插件只能预览xlsx格式的excel表格，不能预览xls格式的。而且有默认展示的行、列数，如果想展示更多需要自己设置，表格的宽高目前也不能自适应，看源代码有提供一个方法transformData，但需要循环遍历才能修改宽高（且宽高的值只能接收数字形式）。具体可见源码：vue-office插件属性使用说明文档

   安装vue-office插件：npm install @vue-office/excel

   xlsx插件预览excel参考：vue 在线预览 word ，Excel，pdf，图片 数据流 内网文件流 亲测有效（word 目前支持docx文件以及doc文件（doc需要后端处理））

   参考：上传文件预览

   参考npm插件文档：添加链接描述

4. 将arraybuffer转成文件流

	let fileReader = new FileReader()
      fileReader.readAsArrayBuffer(file) // file就是接收到的arraybuffer
      fileReader.onload =  () => {
        this.src = fileReader.result
      }

参考：Blob，ArrayBuffer，File，FileReader，Buffer，TypeArray 的作用和区别

参考：二进制学习------Blob，ArrayBuffer、File、FileReader和FormData的区别