vue实现pdf预览功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue实现pdf预览功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

背景：材料上传之后点击预览实现在浏览器上预览的效果
效果如下：
vue实现pdf预览功能,vue.js,pdf,javascript
实现代码如下：
//预览和下载操作

<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);
      }
    },

后台返回的流文件格式
vue实现pdf预览功能,vue.js,pdf,javascript 文章来源地址https://www.toymoban.com/news/detail-642912.html