vue 实现文件预览（支持pdf,xls、xlsx,doc、docx,jpg、jepg、png）

okseventy

已于 2023-06-07 17:03:45 修改

阅读量1.6w

点赞数 2

文章标签： vue.js pdf 前端

于 2023-06-07 16:21:42 首次发布

本文链接：https://blog.csdn.net/Yane410/article/details/131090120

版权

文章展示了如何在Vue项目中使用avue-crud组件进行数据展示，并结合vue-office插件实现PDF和Word文档的预览。针对Excel预览存在的问题，文章提到了需要取数组对象索引最长的作为显示内容，以解决显示不全的问题。此外，还提供了图片预览的处理方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<avue-crud ref="crud" :option="fileOption" :data="dataCRUD" :page.sync="page" :search.sync="search" @current-change="currentChange" @size-change="sizeChange"
 @search-reset="searchReset" @search-change="searchChange">
      <!-- 预览 -->
       <template slot-scope="scope" slot="name">
            <el-link type="primary" @click="preview(scope.row)" :underline="false">{{scope.row.name}}</el-link>
       </template>                   
 </avue-crud>

预览的部分展示在dialog中，根据点击的文件类型进行判断展示

 export default {
        data() {
            return {
                excelURL: "", //文件地址，看你对应怎末获取、赋值
                fileType:'',//文件类型区分预览
                currentManages:[],//编辑时接口数据
                dialog: {
                    dialogVisible: false,
                    src: '',
                    isPdf: false,
                    isExcel: false,
                    isWord: false,
                    isPicture:false
                },
                maxExcelData:[],
                maxIndex:'',
            };
        },

其中pdf和docx文件使用的插件详情：https://github.com/501351981/vue-office

<!-- 预览 -->
  <el-dialog  :title="previewTitle" :visible.sync="dialog.dialogVisible"> 
              <div v-if="dialog.isPdf"> 
                    <vue-office-pdf 
                    :src="previewUrl"
                    @rendered="renderedHandler"
                    @error="errorHandler"
                />
                </div>
                <div  v-else-if="dialog.isWord">
                    <vue-office-docx
                    :src="previewUrl"
                    style="height: 100vh;"
                    @rendered="renderedHandler"
                    @error="errorHandler"
                />
                </div>
                <div v-else-if="dialog.isExcel"> 
                    <div id="table" >
                     <el-table :data="excelData" border  stripe 
:header-cell-style="{'background':'#F5F4F7'}">
                     <el-table-column
                      type="index"
                      label="序号"
                      width="60"
                      :resizable="false"
                      align="center" />
                     <el-table-column
                       v-for="(value, key, index) in excelData[maxIndex]"
                       :key="index"
                       :prop="key"
                       :label="key"></el-table-column>
                      </el-table>
                 </div>
                </div>
                <div  v-else-if="dialog.isPicture"> 
                    <div v-viewer>
                        <img  :src="previewUrl" :toolbar="false" width="900px"/> 
                      </div>
                </div>
        </el-dialog>

后面发现Excel 中sheet不能显示正确，所以找了另一个预览Excel插件，详见：vue在线预览word、excel、pdf、txt、图片的方法实例_vue.js_脚本之家

其中Excel在展示的时候会显示不全，需要取数组对象索引的长度最长的作为赋值对象

 // 预览
            preview(row){
                if (!(row.url.includes('.png') || row.url.includes('.jpg') || row.url.includes('.jpeg')  || row.url.includes('.JPG') || row.url.includes('.PNG') || row.url.includes('.JPEG')  || row.url.includes('.pdf') || row.url.includes('.xlsx') || row.url.includes('.xls') || row.url.includes('.doc'))) {
                    this.$message.error('文件类型不支持预览')
                    return false
                }
                if (row.url.includes('.pdf')) {
                    this.dialog.isPdf = true
                    this.dialog.isExcel = false
                    this.dialog.isWord = false
                    this.dialog.isPicture = false
                    this.dialog.src = ''
                    this.iframeLoading = true
                    this.previewTitle = row.name
                    // this.previewUrl = this.pdf
                    this.previewUrl = row.url
                } else if (row.url.includes('.xls')){
                    this.dialog.isPdf = false
                    this.dialog.isExcel = true
                    this.dialog.isWord = false
                    this.dialog.isPicture = false
                    this.previewTitle = '预览'
                    // row.url=this.xlsx
                    this.readWorkbookFromRemoteFile(row.url)
                }else if (row.url.includes('.doc')||row.url.includes('.docx')){
                    this.dialog.isPdf = false
                    this.dialog.isExcel = false
                    this.dialog.isWord = true
                    this.dialog.isPicture = false
                    this.previewTitle = row.name
                    // this.previewUrl = this.docx
                    this.previewUrl = row.url
                }else if (row.url.includes('.jpg')||row.url.includes('.JPG')||row.url.includes('.jpeg')||row.url.includes('.png')){
                    this.dialog.isPdf = false
                    this.dialog.isExcel = false
                    this.dialog.isWord = false
                    this.dialog.isPicture = true
                    this.previewTitle = row.name
                    this.previewUrl = row.url
                }
                this.dialog.dialogVisible = true
            },
 readWorkbookFromRemoteFile (url) {
                var xhr = new XMLHttpRequest();
                xhr.open("get", url, true);
                xhr.responseType = "arraybuffer";
                let _this = this;
                xhr.onload = function (e) {
                    if (xhr.status === 200) {
                    var data = new Uint8Array(xhr.response);
                    var workbook = XLSX.read(data, { type: "array" });
                    console.log("workbook", workbook);
            
                    var sheetNames = workbook.SheetNames; // 工作表名称集合
                    _this.workbook = workbook;
                    _this.getTable(sheetNames[0]);
                    }
                };
                xhr.send();
            },
  getTable(sheetName) {
                    console.log(sheetName);
                    var worksheet = this.workbook.Sheets[sheetName];
                    this.excelData = XLSX.utils.sheet_to_json(worksheet);
                    //取数组对象中，对象的key最长的一个进行赋值操作
                    let arr = []
                    let obj ={}
                    arr.push(obj)
                    let mapObj =  new Map()
                    let size = 0
                    for(let i= 0;i<this.excelData.length;i++){
                        let arrLength = 0
                        for(let key in this.excelData[i] ){
                            arrLength++
                        }
                        mapObj.set(i,arrLength)
                    //    console.log(mapObj)
                    }
                    let contrastNum = 0
                    this.maxIndex = 0
                    mapObj.forEach((value, key, self) => {
                            // console.log(key,'=>', value)
                            if(value>contrastNum){
                                contrastNum = value
                                this.maxIndex = key
                            }
                          
                    });
                    console.log(this.maxIndex,contrastNum,'999')
                   
        },

图片预览,详见：https://www.cnblogs.com/sgs123/p/12197278.html