具体调用vue预览的功能

<template>
  <div>
    <van-nav-bar
      left-text="返回"
      right-text="提交"
      title="附件数据"
      left-arrow
      :fixed="true"
      :placeholder="true"
      @click-left="back"
      @click-right="fileSubmit"
    />
    <van-form>
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
       <van-swipe-cell v-for="(item, index) in list" :key="index">
         <van-card
           :price="item.createdate"
           currency=""
           :desc="item.attachmenttitle + '.' + item.extend"
           title="附件名称:"
           class="goods-card"
           :thumb="path[index]"
           @click="clickView(path[index], index, item)"
         />
         <template #right>
           <van-button square text="删除" type="danger" class="delete-button" @click="delFile(item.id)" />
           <van-button square type="primary" text="下载" class="delete-button" @click="downloadFile(item)" />
         </template>
       </van-swipe-cell>
      </van-pull-refresh>
    </van-form>

   <!-- 文件上传 -->
   <van-form @submit="onSubmit" enctype="multipart/form-data">
     <van-uploader
       style="float: left;margin-left: 14px;margin-top: 15px;"
       v-model="fileList"
       accept="file"
      >
       <van-button size="small" icon="plus" type="primary">上传文件</van-button>
     </van-uploader>
   </van-form>
   <van-overlay :show="show" @click="show = false">
     <van-loading size="24px" color="#1989fa" style="top: 50%;" vertical>加载中...</van-loading>
   </van-overlay>
   <van-image-preview v-model="showPicture" :images="images" :startPosition="startPositionIndex"/>
   <a id="downLoadExcel" :href="downLoadTemplateURL" :download="filename"></a>
  </div>
</template>

<script>
  import { Toast } from 'vant';

  export default {
    name: 'chooseProples',
    data() {
      return {
        showPicture: false,        //控制预览图片显示
        show: false,              //控制遮罩层显示
        isLoading: false,         //下拉刷新
        fileList: [],             //文件上传列表
        list: [],                 //图片列表
        result: [],
        id:'',                    //制单差错id
        realpath: './static/img/images/wenjianjia.jpg', //文件图标图片
        pdfPath: './static/img/images/pdfIcon.jpg', //pdf图标图片
        excelPath: './static/img/images/excelIcon.jpg',  //excel图标图片
        wordPath: './static/img/images/wordIcon.jpg',  //word图标图片
        path: [],                 //存放获取的图片路径
        images: [],               //存放需要预览的图片路径
        iamgeFileName: [],        //存放图片文件姓名
        startPositionIndex: 1,    //图片预览起始位置索引
        num: 0,
        downLoadTemplateURL: '',  //下载的文件地址
        filename: '',             //下载后的文件名
        pdfList: [],              //pdf文件路径列表
        excelList: [],            //excel文件路径列表
        wordList: [],             //word文件路径列表
      };
    },
    created(){
      this.getParams()

      this.getList()
    },
    components:{

    },
    methods: {
      //点击预览
      clickView(path, index, filedata) {
        if(filedata.extend == 'pdf') {  //预览pdf
          this.pdfList.some((item, i) => {
            if(item.imgId == filedata.id) {
              this.$router.push({
                name: 'pdfPreview',
                params: {
                  id: this.id,
                  url: item.url
                }
              })
              return true;
            }
          })
        } else if(filedata.extend == 'xlsx' || filedata.extend == 'xls') {  //预览excel
          this.excelList.some((item, i) => {
            if(item.imgId == filedata.id) {
              this.$router.push({
                name: 'excel',
                params: {
                  id: this.id,
                  url: item.url
                }
              })
              return true;
            }
          })
        } else if(filedata.extend == 'docx' || filedata.extend == 'doc') { //预览word
          this.wordList.some((item, i) => {
            if(item.imgId == filedata.id) {
              this.$router.push({
                name: 'word',
                params: {
                  id: this.id,
                  url: item.url
                }
              })
              return true;
            }
          })
        } else {
          this.iamgeFileName.some((item, i) => {
            if(item == filedata.id) {
              this.startPositionIndex = i;
              this.showPicture = true;
              return true;
            }
          })
        }
      },
      //获取图片路径
      async getFile(res) {
        for(let i = 0; i < res.length; i++) {
          await this.$http.get('/aeo_smart/ICommonApi.do?viewFile_chapter', {
            params: {
              fileid: res[i].id,
              subclassname: res[i].subclassname,
              fid: res[i].id
            },
            responseType: 'blob'
          })
          .then((response) =>{
              let dataInfo = response.data
              let fileHeader = '';
              let typeContent = dataInfo.type;
              //判断类型是否是图片类型
              if(res[i].extend == 'png' || res[i].extend == 'gif' || res[i].extend == 'x-icon' || res[i].extend == 'jpg') {
                fileHeader = "data:image/png;base64,";   //设置base64 的格式
                typeContent = "image/" + res[i].extend;  //设置blob的格式

                // 生成blob图片,需要参数(字节数组, 文件类型)
                let blob = new Blob([dataInfo], { type: typeContent })

                const reader = new FileReader();
                let url = '';
                reader.onload = function (e) {
                  url = e.target.result
                }
                setTimeout(rese => {
                  this.path.push(url);
                  this.images.push(url);
                  this.iamgeFileName.push(res[i].id);
                }, 500)

                //读取blob对象，获得URL格式的字符串（base64编码）以表示所读取文件的内容
                reader.readAsDataURL(blob);

              }else if(res[i].extend == 'pdf') {//保存pdf路径
                var url = window.URL.createObjectURL(dataInfo);

                setTimeout(rese => {
                  this.pdfList.push({url: url, imgId: res[i].id})
                  this.path.push(this.pdfPath);
                }, 500)
              } else if(res[i].extend == 'xlsx' || res[i].extend == 'xls') {//保存xlsx路径
                var url = window.URL.createObjectURL(dataInfo);

                setTimeout(rese => {
                  this.excelList.push({url: url, imgId: res[i].id})
                  this.path.push(this.excelPath);
                }, 500)
              } else if(res[i].extend == 'docx' || res[i].extend == 'doc') {//保存word路径
                var url = window.URL.createObjectURL(dataInfo);

                setTimeout(rese => {
                  this.wordList.push({url: url, imgId: res[i].id})
                  this.path.push(this.wordPath);
                }, 500)
              } else {
                setTimeout(rese => {
                  this.path.push(this.realpath);
                }, 500)
              }


          })
          .catch(function (error) {
            console.log(error);
          });
        }
      },
      //返回键
      back() {
        this.$router.push({
          name: 'voucherErrorInfo',
          params: {
            id: this.id
          }
        })
      },
      onRefresh() {
         setTimeout(() => {
           this.getList();
           this.isLoading = false;
         }, 1000);
      },
      getParams() {
       // 取到路由带过来的参数
       let routerParams = this.$route.params.id
       // 将数据放在当前组件的数据内
       this.id = routerParams
      },
      //获取文件数据
      getList () {
        this.$http.post('/aeo_smart/ICommonApi.do?getVoucherErrorFile', {
          fid: this.id
        })
        .then((response) =>{
          // 当请求成功
          if (response.data.issuccess === "success") {
            this.path = [];
            this.images = [];
            this.iamgeFileName = [];
            this.list = response.data.content
            this.getFile(response.data.content)
          }
          this.isLoading = false;
        })
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          // always executed
        });
      },
      //文件提交
      fileSubmit() {
        this.onSubmit()
      },
      //上传文件
      async onSubmit () {
        //获取登录人信息
        let loginUser = JSON.parse(window.localStorage.getItem('loginUser'));
        let formData = new window.FormData();
        if(this.fileList.length > 0) {
          this.show = true;
          for(let i = 0; i < this.fileList.length; i++) {
            formData.append("file", this.fileList[i].file);
            await this.$http.post('/aeo_smart/ICommonApi.do?saveFiles&fid=' + this.id + '&type=voucherError' + '&loginUser=' + loginUser.id + '&departid=' + loginUser.departid, formData, { headers: { "Content-Type": "multipart/form-data" }})
            .then((response) =>{
              // 当请求成功
              if (response.data.issuccess === "success") {
                formData.delete("file");
              }
            })
            .catch(function (error) {
              console.log(error);
            })
            .then(function () {
              // always executed
            });
          }
          this.onRefresh();
          this.fileList = []
          setTimeout(() => {
            this.show = false;
            Toast.success("上传成功");
          }, 1000);
        }
      },
      //删除文件
      delFile(id) {
        this.$dialog.confirm({
          message: '确定删除吗？',
        }).then(() => {
          //开启遮罩层
          this.show = true;
          this.$http.get('/aeo_smart/ICommonApi.do?doDel', {
            params: {
              id: id
            }
          })
          .then((response) =>{
            // 当请求成功
            if (response.data.issuccess === "success") {
              this.onRefresh();
              setTimeout(() => {
                this.show = false;
                Toast.success(response.data.result);
              }, 1000);
            }else {
              this.$notify(response.data.result);
            }
          })
          .catch(function (error) {
            console.log(error);
          })
          .then(function () {
            // always executed
          });
        });

      },
      //下载文件
      downloadFile(file) {
        this.$http.get('/aeo_smart/ICommonApi.do?viewFile_chapter', {
          params: {
            fileid: file.id,
            subclassname: file.subclassname,
            fid: file.id
          },
          responseType: 'blob'
        })
        .then((response) =>{
          let blob = response.data
          let fileName = file.attachmenttitle + "." + file.extend;
          if ('download' in document.createElement('a')) {
            var url = window.URL.createObjectURL(blob);
            this.downLoadTemplateURL = url;
            this.filename = fileName;

            setTimeout( () => {
              document.querySelector("#downLoadExcel").click();
            },500)

            setTimeout(() => {
              window.URL.revokeObjectURL(url); // 释放URL 对象
            }, 1000);

            /* //定义一个a标签
            var a = document.createElement('a');

            a.style.display = 'none';
          　a.href = url;
          　a.download = fileName;
            document.body.appendChild(a)
          　a.click();
            setTimeout(() => {
              window.URL.revokeObjectURL(url); // 释放URL 对象
              document.body.removeChild(a);
            }, 1000);  //解决部分浏览器下载时“无此文件”问题
 */
          } else {
            navigator.msSaveBlob(blob, fileName)
          }
        })
        .catch(function (error) {
          console.log(error);
        });
      },
    }

  };
</script>

<style scoped>
.van-swipe-cell {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding-left: 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
  text-align: left;
}
.delete-button {
  height: 100%;
  margin-left: 1px;
}
.submit{
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>