js实现在线预览(PC)图片、pdf、excel、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插件：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的区别