Vue+ElementUI使用vue-pdf實現(xiàn)預覽功能

更新時間：2019年11月26日 11:37:20 作者：Harvey07

這篇文章主要為大家詳細介紹了Vue+ElementUI使用vue-pdf實現(xiàn)預覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue + ElementUI項目中使用vue-pdf實現(xiàn)簡單預覽，供大家參考，具體內容如下

1、安裝 vue-pdf

npm install --save vue-pdf

2、在vue頁面中導入對應的組件

我這是通過點擊預覽按鈕獲取id打開一個dialog來實現(xiàn)

<!--PDF 預覽-->
 <el-dialog :title="PDF 預覽"
  :visible.sync="viewVisible" width="80%" center
   @close='closeDialog'>
     <div style="margin-bottom: 15px; text-align: right">
        <el-button type="primary" size="small" @click.stop="previousPage">
           上一頁
         </el-button>
         <el-button type="primary" size="small" @click.stop="nextPage">
         下一頁
        </el-button>
     <span>當前第{{pdfPage}}頁 / 共{{pageCount}}頁</span>
    </div>

    <div >
     <pdf
       :src="src"
       :page="pdfPage"
       @num-pages="pageCount = $event"
       @page-loaded="pdfPage = $event"
       style="display: inline-block; width: 100%"
    ></pdf>
  </div>
</el-dialog>

<script>
 import pdf from 'vue-pdf';
 export default {
    components: {
      pdf
    },
    data() {
    return {
    //PDF預覽
        viewVisible: false,
        src: null,
        pdfPage : 1,
        pageCount: 0,
  }
 },
 methods:{
  //PDF預覽
      previewPDF(row){
        this.src = pdf.createLoadingTask(documentConstants.previewPDFUrl+row.contractId);
        this.src.then(pdf => {
          this.viewVisible = true;
        });
      },

      //關閉窗口初始化PDF頁碼
      closeDialog(){
        this.pdfPage = 1;
      },

      //PDF改變頁數(shù)
      previousPage(){
        var p = this.pdfPage
        p = p>1?p-1:this.pageCount
        this.pdfPage = p
      },
      nextPage(){
        var p = this.pdfPage
        p = p<this.pageCount?p+1:1
        this.pdfPage = p
      }
 }
  }
</script>

3、Controller的返回

@RequestMapping(value = "/previewPDF/{contractId}")
  public ResponseEntity<byte[]> previewPDF(@PathVariable Long contractId) throws TException, IOException {
    ContractAttachmentTmpModelDTO model = contractScanManagementRpcService.queryContractAttachmentTmp(contractId);
    HttpHeaders headers = new HttpHeaders();
    headers.setContentDispositionFormData("attachment", model.getAttachmentName());
    headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
    return new ResponseEntity<byte[]>(model.getAttachmentData(),
        headers, HttpStatus.OK);
  }

總結：這個是實現(xiàn)一個簡單的預覽功能。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: