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

1、安裝 vue-pdf

npm install --save vue-pdf

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

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

:visible.sync="viewVisible" width="80%" center

@close='closeDialog'>

上一頁

下一頁

當前第{{pdfPage}}頁 / 共{{pageCount}}頁

:src="src"

:page="pdfPage"

@num-pages="pageCount = $event"

@page-loaded="pdfPage = $event"

style="display: inline-block; width: 100%"

>

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改變頁數

previousPage(){

var p = this.pdfPage

p = p>1?p-1:this.pageCount

this.pdfPage = p

},

nextPage(){

var p = this.pdfPage

p = p

this.pdfPage = p

}

}

}

3、Controller的返回

@RequestMapping(value = "/previewPDF/{contractId}")

public ResponseEntity 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(model.getAttachmentData(),

headers, HttpStatus.OK);

}

總結：這個是實現一個簡單的預覽功能。

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

總結

以上是生活随笔為你收集整理的vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。