• Vue3 实现文件预览 Word Excel pdf 图片 视频等格式 大全!!!!

    先上效果图

     

     插件安装

    先说 word 文件是docx-preview插件

              excel文件是用 xlsx 插件    

    介绍后端返回的数据

    因为在拦截器处 做了对数据的处理 最后你调接口拿到的数据是 一个对象 里面包含:

    url : blob对象转换的用于访问Blob数据的临时链接。这个链接可以被用于在网页中展示二进制数据，比如显示图像或者播放音视频文件

    blobs:  返回的Blob对象，代表了从网络请求中获取到的二进制数据

    这上下俩部分很重要!!!!!!!!

    如果返回的普通格式的话就大家直接转化

    1. const blob = new Blob([res], { type: 'application/pdf' })  //你需要的类型 转化为blob对象

    2. const url = window.URL.createObjectURL(blob)         //将对象转化为链接

    也就是你后面掉接口返回的数据  

    给大家打印一下 我当时在网上搜索这类资料的时候 就是在这一部分弄糊涂了 对数据格式不了解

     

     然后就到正式书写了

    下载引入插件 (我这是v3 引入 vue2版本 csdn官网上搜vue预览文件 一大堆 大家自己搜一下)

    1. //word文档注释
    2. import { renderAsync } from 'docx-preview';
    3. //excel注释
    4. import * as XLSX from "xlsx";

    Word预览   

    不清楚result 返回内容的往上滑 这里传递的是blob对象!!

    1.  <!-- 若是word文档格式数据号展示  我这里是加自己定义的类型判断了 fileType  大家可删除掉  -->
    2.   <div ref="refWord" id="fileShow" v-else-if="fileType == 'docx'" style="width: 100%;height: 100%;"></div>
    3.  
    4.  
    5.      //js代码处
    6.      const previewContainer = document.getElementById('fileShow');
    7.             renderAsync(result.blob, previewContainer) //渲染

    Excel预览

    不清楚result 返回内容的往上滑 这里传递的是blob对象!!    中间内容是在拿到数据渲染的时候插件数据处理 最后将处理的数据当参数传递到处理样式的方法中

    1. <!-- 若是excel格式数据展示 -->
    2. <div  id="fileShowTwo" style="width: 100%;height: 100%;" v-else-if="fileType == 'xlsx'">
    3.         <div class="tab">
    4.         <el-radio-group size="small" v-model="excel.sheetNameActive" @change="getSheetNameTable">
    5.             <el-radio-button v-for="(item, index) in excel.sheetNames" :key="index" :label="item"></el-radio-button>
    6.         </el-radio-group>
    7.         </div>
    8.         <div
    9.             style="margin-top: 5px;border: 1px solid #a0a0a0;overflow:auto;">
    10.         <div v-html="excel.SheetActiveTable" style="padding: 10px 15px"></div>
    11.         </div>
    12. </div>
    13. <div v-else-if="fileType == 'mp4'" style="width: 100%;height: 100%;">
    14.     <video :src="fileAddress" controls  style="width: 100%;height: 100%;"></video>
    15. </div>
    16.  
    17. //js代码处
    18.  
    19. //表格预览所需数据 定义
    20. const data = reactive({
    21.     excel: {
    22.         // 数据
    23.         workbook: {},
    24.         // 表名称集合
    25.         sheetNames: [],
    26.         // 激活项
    27.         sheetNameActive: "",
    28.         // 当前激活表格
    29.         SheetActiveTable: ""
    30.     }
    31. })
    32. const { excel } = toRefs(data);
    33. // 视频预览所需数据
    34. const emptyTips = ref('暂无内容');
    35.  
    36.  
    37.  
    38.       //格式为excel时 方法中书写的内容 
    39.             const reader = new FileReader(); //创建了一个FileReader对象，这个对象用于异步读取文件内容
    40.             //通过readAsArrayBuffer将blob转换为ArrayBuffer对象
    41.             reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流
    42.             reader.onload = (event) => {
    43.                 // 读取ArrayBuffer数据变成Uint8Array
    44.                 var data = new Uint8Array(event.target.result);
    45.                 // 这里的data里面的类型和后面的type类型要对应
    46.                 var workbook = XLSX.read(data, { type: "array" });
    47.                 const sheetNames = workbook.SheetNames // 工作表名称集合
    48.                 excel.value.workbook = workbook
    49.                 excel.value.sheetNames = sheetNames
    50.                 excel.value.sheetNameActive = sheetNames[0]
    51.                 //方法
    52.                 getSheetNameTable(sheetNames[0])
    53.             };
    54.  
    55.  
    56.  
    57. //定义的方法
    58. const getSheetNameTable = (sheetName) => { 
    59.       try {
    60.         // 获取当前工作表的数据
    61.         const worksheet = excel.value.workbook.Sheets[sheetName]
    62.         // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改
    63.         let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })
    64.         htmlData = htmlData === '' ? htmlData : htmlData.replace(/<table/, ')
    65.         // 第一行进行改颜色
    66.         htmlData = htmlData === '' ? htmlData : htmlData.replace(/<tr/, '
      67. )
    67.         excel.value.SheetActiveTable = htmlData
    68.     } catch (e) {
    69.         // 如果工作表没有数据则到这里来处理
    70.         excel.value.SheetActiveTable = '
      ' + emptyTips.value + '
      '
    71.     }
    72. }
      73. pdf 预览  
      这个需要用到iframe标签  他的blob对象的type需要是"type": "application/pdf"  大家可以看一下自己的blob对象 如果是后端返回的直接是blob格式 但是type不对 那等下我下面代码有转化  如果返回的普通数据 大家自己根据上面的格式自己转化blob对象的时候自己设置一下type 
      1.  <!-- 若是pdf数据展示 -->
      2.      <iframe :src="fileAddress"   type="application/pdf"  v-else-if="fileType == 'pdf'" id="pdfShow" width="100%" height="100%"></iframe>
      3.  
      4.  
      5.  
      6. //js代码处
      7.   //格式为pdf时
      8.              const reader = new FileReader();
      9.             reader.readAsArrayBuffer(result.blob);
      10.             reader.onload = function () {
      11.                 fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" }))
      12.             }
      最后是jpg png ,mp4格式预览
      1.   //这里就用到blob对象转化的链接了 注意区分!!
      2. if (type == 'jpg' || type == 'png' || type == 'mp4') {
      3.             fileAddress.value = result.url
      4. }
      5.  
      6.  
      7. //图片类型展示
      8.  <img style="width: 150px;height: 150px;" :src="fileAddress" alt="" v-if="fileType == 'jpg' || fileType == 'png'">
      9.  
      10. //视频类型展示
      11.   <div v-else-if="fileType == 'mp4'" style="width: 100%;height: 100%;">
      12.            <video :src="fileAddress" controls  style="width: 100%;height: 100%;"></video>
      13.     </div>
      下载文件 !!
      1. <el-button @click="DownloadFn()"> 下载</el-button>
      2.  
      3.  
      4. // 文件下载
      5. const DownloadFn = () => { 
      6.     let a = document.createElement('a')
      7.      // 下载链接
      8.     a.href = blobUploadValue.value  //这个就是那个blob链接!!
      9.     // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
      10.     //这里是你上传的文件名 加上他的类型 jpg,png,docx.....
      11.     a.download = fileNameValue.value + '.' + fileType.value
      12.     document.body.appendChild(a)
      13.     // 点击a标签，进行下载 
      14.     a.click()
      15.     // 移除元素
      16.     document.body.removeChild(a)
      17. }
      最后是完整代码 
      1. <el-dialog v-model="dialogTabsVisible" title="附件展示" class="file-show-box" @close="closeDialog()">
      2.             <div class="file-body">
      3.                 <!-- 左侧附件列表 -->
      4.                 <div class="file-left" >
      5.                     <div class="list" :class="{'list-active' : listAct == index}" v-for="(item, index) in fileList" :key="index" @click="handleClick(item,index)">{{ item.name }}</div>
      6.                 </div>
      7.                 <div class="file-right">
      8.                     <div class="downFile" v-if="fileType != 'pdf'">
      9.                             <el-button @click="DownloadFn()"> 下载</el-button>
      10.                     </div>
      11.                     <!-- 若是图片数据展示 -->
      12.                     <img style="width: 150px;height: 150px;" :src="fileAddress" alt="" v-if="fileType == 'jpg' || fileType == 'png'">
      13.                     <!-- 若是txt格式数据展示 -->
      14.                     <iframe :src="fileAddress" frameborder="0" v-else-if="fileType == 'txt'" style="width: 90%; height: 100%;"></iframe>
      15.                     <!-- 若是pdf数据展示 -->
      16.                     <iframe :src="fileAddress"   type="application/pdf"  v-else-if="fileType == 'pdf'" id="pdfShow" width="100%" height="100%"></iframe>
      17.                     <!-- 若是word文档格式数据号展示 -->
      18.                     <div ref="refWord" id="fileShow" v-else-if="fileType == 'docx'" style="width: 100%;height: 100%;"></div>
      19.                     <!-- 若是excel格式数据展示 -->
      20.                     <div  id="fileShowTwo" style="width: 100%;height: 100%;" v-else-if="fileType == 'xlsx'">
      21.                            <div class="tab">
      22.                             <el-radio-group size="small" v-model="excel.sheetNameActive" @change="getSheetNameTable">
      23.                                 <el-radio-button v-for="(item, index) in excel.sheetNames" :key="index" :label="item"></el-radio-button>
      24.                             </el-radio-group>
      25.                             </div>
      26.                             <div
      27.                                 style="margin-top: 5px;border: 1px solid #a0a0a0;overflow:auto;">
      28.                             <div v-html="excel.SheetActiveTable" style="padding: 10px 15px"></div>
      29.                             </div>
      30.                     </div>
      31.                     <div v-else-if="fileType == 'mp4'" style="width: 100%;height: 100%;">
      32.                         <video :src="fileAddress" controls  style="width: 100%;height: 100%;"></video>
      33.                     </div>
      34.                     <div v-else>
      35.                             该文件暂不支持预览,请下载查看
      36.                     </div>
      37.                 </div>
      38.             </div>
      39.         </el-dialog>
      40.  
      41.  
      42.  
      43.  
      44. //js部分
      45.  
      46. //表格预览所需数据
      47. const data = reactive({
      48.     excel: {
      49.         // 数据
      50.         workbook: {},
      51.         // 表名称集合
      52.         sheetNames: [],
      53.         // 激活项
      54.         sheetNameActive: "",
      55.         // 当前激活表格
      56.         SheetActiveTable: ""
      57.     }
      58. })
      59. const { excel } = toRefs(data);
      60. // 视频预览所需数据
      61. const emptyTips = ref('暂无内容');
      62. // 下载文件
      63. // 文件地址
      64. const fileAddress = ref('')
      65. // 下载流数据
      66. const blobUploadValue = ref('')
      67.  
      68. //我这里的参数type是其他地方传递过来的 注意甄别
      69. const downloadFn = (id, type) => {
      70.     let params = { fileId: id }
      71.     download(params).then(result => {
      72.         console.log(result.url, 'resolve');
      73.         console.log(result.blob, 'blob');
      74.          blobUploadValue.value = result.url
      75.         if (type == 'jpg' || type == 'png' || type == 'mp4') {
      76.             //格式为图片 视频时
      77.             fileAddress.value = result.url
      78.         } else if (type == 'docx') {
      79.             //格式为word时
      80.             const previewContainer = document.getElementById('fileShow');
      81.             renderAsync(result.blob, previewContainer) //渲染
      82.         } else if (type == 'xlsx') {
      83.             //格式为excel时
      84.             const reader = new FileReader();
      85.             //通过readAsArrayBuffer将blob转换为ArrayBuffer对象
      86.             reader.readAsArrayBuffer(result.blob) // 这里的res.data是blob文件流
      87.             reader.onload = (event) => {
      88.                 // 读取ArrayBuffer数据变成Uint8Array
      89.                 var data = new Uint8Array(event.target.result);
      90.                 // 这里的data里面的类型和后面的type类型要对应
      91.                 var workbook = XLSX.read(data, { type: "array" });
      92.                 const sheetNames = workbook.SheetNames // 工作表名称集合
      93.                 excel.value.workbook = workbook
      94.                 excel.value.sheetNames = sheetNames
      95.                 excel.value.sheetNameActive = sheetNames[0]
      96.                 getSheetNameTable(sheetNames[0])
      97.             };
      98.         } else if (type == 'pdf') {
      99.             //格式为pdf时
      100.              const reader = new FileReader();
      101.             reader.readAsArrayBuffer(result.blob);
      102.             reader.onload = function () {
      103.                 fileAddress.value = URL.createObjectURL(new Blob([reader.result], { "type": "application/pdf" }))
      104.             }
      105.         }
      106.     })
      107. }
      108.  
      109. // 文件下载
      110. const DownloadFn = () => { 
      111.     let a = document.createElement('a')
      112.      // 下载链接
      113.     a.href = blobUploadValue.value
      114.     // 下载文件名,如果后端没有返回，可以自己写a.download = '文件.pdf'
      115.     a.download = fileNameValue.value + '.' + fileType.value
      116.     document.body.appendChild(a)
      117.     // 点击a标签，进行下载 
      118.     a.click()
      119.     // 移除元素
      120.     document.body.removeChild(a)
      121. }
      122.  
      123. const getSheetNameTable = (sheetName) => { 
      124.       try {
      125.         // 获取当前工作表的数据
      126.         const worksheet = excel.value.workbook.Sheets[sheetName]
      127.         // 转换为数据  1.json数据有些问题，2.如果是html那么样式需修改
      128.         let htmlData = XLSX.utils.sheet_to_html(worksheet, { header: '', footer: '' })
      129.         htmlData = htmlData === '' ? htmlData : htmlData.replace(/<table/, '
       
 
 
 
 
 
 
 
 

      )
    73.         // 第一行进行改颜色
    74.         htmlData = htmlData === '' ? htmlData : htmlData.replace(/<tr/, '
      75. )
    75.         excel.value.SheetActiveTable = htmlData
    76.     } catch (e) {
    77.         // 如果工作表没有数据则到这里来处理
    78.         excel.value.SheetActiveTable = '
      ' + emptyTips.value + '
      '
    79.     }
    80. }
    81.  
    82.  
    83.  
    84.  
    85.  
    86.  
    87.  
    88.  
    89.  
    90.  
      91.  这里是后端返回回来一个附件名称列表 我渲染到左侧的附件列表中 然后通过选中不同的附件 右侧展示不同的文件预览 他的文件类型我也是从这里得到的 然后我通过点击不同的附件列表 执行上面的预览方法 获取到不同的blob数据 然后进行展示 
      我只能给大家说一下我的逻辑 毕竟每个人代码不一样 不一定能直接复制  还是希望能帮到大家
      最后贴上效果图
       
    91. 

                    相关阅读:
      
                    
java11中String类，StringBuffer类和StringBuilder类区别                            
      
探秘TikTok社群：短视频中的共同体验                            
      
Mybatis-Plus官方分库分表神器，一个依赖轻松搞定！                            
      
java split字符串作业                            
      
Zigbee安全概述                            
      
Webinspect                            
      
TFT-eSPI 库在 ESP32 上的配置和使用(ESP32 for Arduino)                            
      
WPF中 ContextMenu 寻找父物体的一种方案                            
      
学习spring源码的意义是什么呢？有什么高效的源码学习方式吗？                            
      
独立站运营的核心——推广分享                            
      
                          
                
    92. 
                    原文地址：https://blog.csdn.net/m0_65607651/article/details/133887921
                
      93.