vue-pdf預覽（以二進制格式存儲在數據庫中的文件）

時間 2019-11-08

原文原文鏈接

前言

使用vue-pdf插件預覽數據庫中以二進制存儲的pdf文件javascript

後端文件以流的方式返回

@GetMapping(value="/download/{pid}")
	@ApiOperation(value = "責任書下載", httpMethod = "GET", notes = "責任書下載")
	public void download( HttpServletResponse response, HttpServletRequest request, @ApiParam(name="pid",value="文件ID", required = true)@PathVariable(value = "pid", required = false) String pid)throws Exception {
			if(StringUtils.isNotBlank(pid)){
				SeAttach seAttach =seAttachManager.getByPaperId(pid);
				if(null != seAttach){
					String fileName = seAttach.getFileName();
					byte[] data = seAttach.getFileContent();
					response.setContentType("application/x-download");
					if (System.getProperty("file.encoding").equals("GBK")) {
						response.setHeader("Content-Disposition", "attachment;filename=\"" + new String(fileName.getBytes(), "ISO-8859-1") + "\"");
					} else {
						response.setHeader("Content-Disposition", "attachment;filename=\"" + URLEncoder.encode(fileName, "utf-8") + "\"");
					}
						OutputStream os = null;
					try {
						os = response.getOutputStream();
						os.write(data);
						os.flush();
					} catch (IOException e) {
						e.printStackTrace();
					}finally {
						if (os != null) {
							os.close();
						}
					}
				}
			}
	}
複製代碼

前臺處理blob流文件轉化爲url

handleSee(index, row) {
      let that = this;
      that.fileId = row.pid;// 當前行數據id
      that.$store
        .dispatch("hse/previewSePapers", row.pid)
        .then(response => {
          const xhr = new XMLHttpRequest();
          const dataParams = JSON.parse(sessionStorage.currentUser); // sessionStorage中那當前用戶信息
          console.log("dataPram",dataParams)
          xhr.open("get", response.request.responseURL);// 請求的url
          xhr.setRequestHeader("Authorization", "Bearer " + dataParams.token);// 攜帶token訪問 
          xhr.responseType = "blob";// blob類型
          xhr.onload = function() {
            if (this.status === 200) {
              const blob = this.response;
              const url = createObjectURL(blob);
              // 將轉化後 url 賦值給 vue-pdf 插件
              that.src = url;
              that.$refs.pdfSearch.handleOpen();
            }
          };
          xhr.send(null);
        })
        .catch(e => {
          that.$message.error("文件查看失敗", e);
        });
    }
複製代碼

pdf插件代碼

<Pdf ref="pdfSearch" :src="src" :fileId="fileId" />
複製代碼

<template>
  <el-dialog :visible.sync="pdfDialog" :close-on-click-modal="false" :show-close="false" width="900px" top="52px" >
    <div class="pdf" v-show="fileType == 'pdf'">
      <p class="arrow">
        <!-- 上一頁 -->
        <span @click="changePdfPage(0)" class="currentPage" :class="{ grey: currentPage == 1 }" >上一頁&nbsp;&nbsp;</span >
        <span style="color: #8c8e92;">{{ currentPage }} / {{ pageCount }}</span>
        <!-- 下一頁 -->
        <span @click="changePdfPage(1)" class="currentPage" :class="{ grey: currentPage == pageCount }" >&nbsp;&nbsp;下一頁</span >&nbsp;&nbsp;&nbsp;&nbsp;<el-button icon="el-icon-download" @click="download()" type="primary" size="mini" >下載</el-button >
        <span style="float :right;padding-right:40px;font-size: 20px;color: #8c8e92;cursor: pointer;" @click="close" ><i class="el-icon-close"></i ></span>
      </p>
        <pdf :src="src" :page="currentPage" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler" ></pdf>
    </div>
  </el-dialog>
</template>

<script> import pdf from "vue-pdf"; export default { name: "attachPreview", components: { pdf }, props: ["src", "fileId"], data() { return { filesProps: { label: "originName" }, pdfDialog: false, currentPage: 0, // pdf文件頁碼 pageCount: 0, // pdf文件總頁數 fileType: "pdf" // 文件類型 }; }, methods: { // 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁 changePdfPage(val) { if (val === 0 && this.currentPage > 1) { this.currentPage--; } if (val === 1 && this.currentPage < this.pageCount) { this.currentPage++; } }, // pdf加載時 loadPdfHandler() { this.currentPage = 1; // 加載的時候先加載第一頁 }, handleOpen() { this.pdfDialog = true; }, //關閉彈框 close() { this.pdfDialog = false; }, //附件下載 download() { this.$store .dispatch("hse/downloadSePapers", this.fileId) .then(() => { this.$message("下載成功"); }) .catch(e => { this.$message.error("文件下載失敗", e); }); } } }; </script>

<style lang="stylus"> .currentPage { cursor: pointer; color: #8c8e92; } .currentPage:hover { color: #2761ff; } .arrow{ position: fixed; top: 0px; left :0px; z-index: 2; width: 100%; background-color: #191919; padding: 12px 0; margin: 0; text-align :center; } >>>.el-dialog__body { color: #606266; font-size: 14px; padding:0; } </style>

複製代碼