vue实现pdf预览功能

背景:材料上传之后点击预览实现在浏览器上预览的效果
效果如下:
在这里插入图片描述
实现代码如下:
//预览和下载操作

<el-table-column fixed="right" label="操作" width="210">
              <template #default="scope">
                <span
                  @click="handleRowClick(scope.row)"
                  class="table-btn btn-handle"
                  ><i class="ri-eye-line"></i>预览</span
                >
                <span
                  @click="handleDownLoadClick(scope.row)"
                  class="table-btn btn-handle"
                  ><i class="ri-download-2-line"></i>下载</span
                >
              </template>
            </el-table-column>
// 材料预览
export function materialPreview(data) {
    return Http.request({
      url: '/file/preview',
      method: 'get',
      responseType: 'blob',
      data: data
    });
  }
  //预览弹窗
  <el-dialog
      title="预览"
      :visible.sync="PreviewDialogVisible"
      append-to-body
      width="70%"
      center
    >
      <div>
        <iframe :src="pdfSrc" width="100%" height="800px"></iframe>
      </div>
    </el-dialog>
    //data中定义的变量
      data() {
    return {
      pdfSrc: "",
      downloadUrl: "http://10.110.96.76/",
      PreviewDialogVisible: false,
      }
     }
    //预览代码
        handleRowClick(row) {
      materialPreview({
        fileName:row.fileName,
        realFileName:row.fileName,
      }).then((res) => {
        console.log(res);

        const blob = new Blob([res.data], { type: "application/pdf" });
        this.pdfSrc = window.URL.createObjectURL(blob);
        this.$nextTick(() => {
          this.PreviewDialogVisible = true;
        });

        console.log(this.pdfSrc);
        //window.open(this.pdfSrc) //新窗口打开,借用浏览器去打印
      });
    }
    //下载代码
      handleDownLoadClick(data) {
      if (data.downloadUrl != null) {
        window.open(this.downloadUrl + data.downloadUrl);
      }
    },

后台返回的流文件格式
在这里插入图片描述文章来源地址https://uudwc.com/A/wNPJ6

原文地址:https://blog.csdn.net/weixin_49203377/article/details/132169923

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

h
上一篇 2023年08月12日 22:50
下一篇 2023年08月12日 22:51