快捷導(dǎo)航

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

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

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

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

1、安裝 vue-pdf

npm install --save vue-pdf

2、在vue頁面中導(dǎo)入對應(yīng)的組件

我這是通過點(diǎn)擊預(yù)覽按鈕獲取id打開一個(gè)dialog來實(shí)現(xiàn)

<!--PDF 預(yù)覽-->
 <el-dialog :title="PDF 預(yù)覽"
  :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>當(dāng)前第{{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預(yù)覽
        viewVisible: false,
        src: null,
        pdfPage : 1,
        pageCount: 0,
  }
 },
 methods:{
  //PDF預(yù)覽
      previewPDF(row){
        this.src = pdf.createLoadingTask(documentConstants.previewPDFUrl+row.contractId);
        this.src.then(pdf => {
          this.viewVisible = true;
        });
      },

      //關(guān)閉窗口初始化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);
  }

總結(jié)：這個(gè)是實(shí)現(xiàn)一個(gè)簡單的預(yù)覽功能。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: