使用vue實現(xiàn)pdf預覽功能的方法

更新時間：2023年08月09日 09:49:42 作者：weixin_49203377

許多朋友想要材料上傳之后點擊預覽實現(xiàn)在瀏覽器上預覽的效果,所以本文將給大家介紹如何使用vue實現(xiàn)pdf預覽功能,文中有實現(xiàn)代碼,有需要的朋友可以參考閱讀下

背景：材料上傳之后點擊預覽實現(xiàn)在瀏覽器上預覽的效果

效果如下：

實現(xiàn)代碼如下：//預覽和下載操作

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

后臺返回的流文件格式