Vue + ElementUI項目中使用vue-pdf實現(xiàn)簡單預覽，供大家參考，具體內容如下
創(chuàng)新互聯(lián)建站自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設計、網(wǎng)站設計、網(wǎng)站建設、電子商務、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務。公司擁有豐富的網(wǎng)站建設和互聯(lián)網(wǎng)應用系統(tǒng)開發(fā)管理經(jīng)驗、成熟的應用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團隊及專業(yè)的網(wǎng)站設計師團隊。
1、安裝 vue-pdf
npm install --save vue-pdf
2、在vue頁面中導入對應的組件
我這是通過點擊 預覽 按鈕 獲取id打開一個dialog來實現(xiàn)
上一頁 下一頁 當前第{{pdfPage}}頁 / 共{{pageCount}}頁
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);
} 總結：這個是實現(xiàn)一個簡單的預覽功能。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
