vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能

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);

}

总结：这个是实现一个简单的预览功能。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持谷谷点程序。