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)簡單預覽，供大家參考，具體內(nèi)容如下
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);
}
總結(jié)：這個是實現(xiàn)一個簡單的預覽功能。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo
這篇文章主要為大家介紹了vue?懸浮窗且?guī)ё詣游焦δ軐崿F(xiàn)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了vue滾動固定頂部及修改樣式，本文給大家提到了滾動固定位置有多種方法,感興趣的朋友跟隨小編一起看看吧2019-05-05
vue路由傳參的基本實現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue路由傳參的基本實現(xiàn)方式,結(jié)合實例形式總結(jié)分析了vue.js路由傳參的三種實現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了Vue加載json文件的方法,結(jié)合實例形式分析了vue.js針對json文件的加載及數(shù)據(jù)讀取等相關操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了vue如何遍歷data所有變量并賦值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解
這篇文章主要介紹了使用Webpack 搭建 Vue3 開發(fā)環(huán)境過程詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了vue.js封裝switch開關組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue3+ts+MicroApp實戰(zhàn)教程,分別在主應用項目(main)和子應用(childrenOne,childrenTwo)項目中安裝microApp，本文給大家詳細講解，需要的朋友可以參考下2022-10-10
解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題
這篇文章主要介紹了解決獲取數(shù)據(jù)后this.$refs.xxx.toggleRowSelection無效的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本篇文章主要介紹了Vue組件之全局組件與局部組件的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10