vue文件预览功能实现

最新推荐文章于 2024-08-21 16:37:11 发布

张敬坤

最新推荐文章于 2024-08-21 16:37:11 发布

阅读量1.1k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_54902466/article/details/130482712

版权

文件预览功能实现

 // 预览接口封装
 export function preview(data) {
  return request({
    url: "地址",
    method: "post",
    data: data,
    responseType: 'blob',
  })
}

实现思路：

通过文件id走接口获取预览文件流
通过 window.URL.createObjectURL 方法将预览文件流转化成图片地址

         this.previewUrl = window.URL.createObjectURL(
            new Blob([res], { type: "application/pdf" })
         );

重新设置弹框或者页面大小

   this.$nextTick(() => {
     this.$refs.pdf.height = document.documentElement.clientHeight-500;
   });

完整js代码

    // 预览
    previewLi(id){
      const loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      preview({ Id: id }).then((res) => {
        this.previewShowPdf = true;
        if (res.code!==500) {
          loading.close();
          // 对后端返回二进制流做处理
          this.previewUrl = window.URL.createObjectURL(
            new Blob([res], { type: "application/pdf" })
          );
          console.log(this.previewUrl,'文件流地址')
          // 重新设置大小
          this.$nextTick(() => {
            this.$refs.pdf.height = document.documentElement.clientHeight-500;
          });
        } else{
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      })
    },

4.通过iframe标签指定类型，显示图片

 <el-dialog v-if="previewShowPdf" title="预览" :visible.sync="previewShowPdf" append-to-body width="90%" v-loading="loading">
      <!-- PDF显示的地方 -->
      <iframe ref="pdf" :src="previewUrl" width="100%"></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="previewShowPdf = false">关 闭</el-button>
      </span>
</el-dialog>