vue项目怎么用后端返回的文件流实现docx和pdf文件预览

实现效果图

大家先看一下实现的效果，分别是docx文件预览和pdf文件预览;

原型是从一个table列表的操作中点击查看源文件，跳转到预览页面：

docx文件预览

pdf文件预览（可实现翻页功能）

docx-preview文件预览

首先安装docx-preview

npm install docx-preview

点击【查看源文件】

...
查看源文件
...

在点击事件方法中，首先进行if判断文件类型，不同的文件类型走不同的逻辑，这里判断是否为.docx文件，然后进行路由跳转到文件预览页面，把id带过去；

...
  //查看源文件
   clickView(row){
         if((row.fileName).indexOf('.docx') !== -1){
             this.$router.push({
                 path: "/dataStandar/knowledgeBase/createBase/vuedocx",
                 query: {
                     //要传的参数
                     id: row.id,
                 },
             });
     
         }else{ 
             //这里代码是pdf文件预览，此处先省略
             ...
         }
        
         
    },
...

vueDocx.vue组件

以上就是docx文件预览逻辑和代码，使用比较简单；

pdf文件预览

首先安装vue-pdf

npm install vue-pdf

然后新建一个vuePdf.vue组件，直接复制粘贴使用即可，样式可以根据自己需求修改，其他不用修改；

  
  


#container {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0;
  top: 50px;
  background: #f4f7fd;
  overflow: auto;
  font-family: PingFang SC;
  width: 100%;
  display: flex;
  /* justify-content: center; */
  position: relative;
}

/* 右侧功能按钮区 */
.right-btn {
  position: fixed;
  right: 5%;
  bottom: 15%;
  width: 120px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 99;
}

.pdfArea {
  width: 900px;
  margin: 0 auto;
}

/* ------------------- 输入页码 ------------------- */
.pageNum {
  margin: 10px 0;
  font-size: 18px;
}

/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

/*在firefox下移除input[number]的上下箭头*/
input[type="number"] {
  -moz-appearance: textfield;
}

.inputNumber {
  border-radius: 8px;
  border: 1px solid #999999;
  height: 35px;
  font-size: 18px;
  width: 60px;
  text-align: center;
}

.inputNumber:focus {
  border: 1px solid #00aeff;
  background-color: rgba(18, 163, 230, 0.096);
  outline: none;
  transition: 0.2s;
}

/* ------------------- 切换页码 ------------------- */
.turn {
  background-color: #164fcc;
  opacity: 0.9;
  color: #ffffff;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 5px 0;
}

.turn-btn {
  background-color: #164fcc;
  opacity: 0.9;
  color: #ffffff;
  height: 70px;
  width: 70px;
  border-radius: 50%;
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.turn-btn:hover,
.turn:hover {
  transition: 0.3s;
  opacity: 0.5;
  cursor: pointer;
}

/* ------------------- 进度条 ------------------- */
.progress {
  position: absolute;
  right: 50%;
  top: 50%;
  text-align: center;
}

.progress > span {
  color: #199edb;
  font-size: 14px;
}

点击【查看源文件】

...
查看源文件
...

查看源文件方法

...
  //查看源文件
   clickView(row){
         if((row.fileName).indexOf('.docx') !== -1){
             //这里代码是docx文件预览，此处省略
             ...
         }else{ 
               this.loading = this.$loading({
                    lock: true,
                    text: "正在加载...",
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.6)'
                });
                //接口函数传入id,返回的文件流
                getSourceFileById({},row.id).then(res => {
                    var data = res.data
                    var binaryData = [];
                    binaryData.push(data);
                    let url = window.URL.createObjectURL(
                        new Blob(binaryData, {
                        type: "application/pdf;charset=utf-8",
                        })
                    );
                
                    if (url != null && url != undefined && url) {
                        // vue路由跳转并以问号形式携带vue-pdf预览时所需要的pdf地址
                        this.$router.push({
                            path: "/dataStandar/knowledgeBase/createBase/vuepdf",
                            query: {
                                //要传的参数
                                url: url,
                            },
                        });
                        this.loading.close()
                    }
                })
         }
    },
...