Vue + ElementUI Used in the project vue-pdf Realize simple Preview
1, install vue-pdf
npm install --save vue-pdf
2, stay vue Page to import the corresponding components
I do this by clicking preview Button obtain id Open one dialog To achieve
<!--PDF preview --> <el-dialog :title="PDF preview " :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"> previous page <
/el-button> <el-button type="primary" size="small" @click.stop="nextPage"> next page <
/el-button> <span> The current {{pdfPage}} page / common {{pageCount}} page </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 preview viewVisible: false, src: null, pdfPage : 1, pageCount: 0, } }
, methods:{ //PDF preview previewPDF(row){ this.src = pdf.createLoadingTask(
documentConstants.previewPDFUrl+row.contractId); this.src.then(pdf => { this.
viewVisible= true; }); }, // Close window initialization PDF Page number closeDialog(){ this.pdfPage = 1; },
//PDF Change the number of pages 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 Return of
@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); }
summary ： This is to achieve a simple preview function .
Technology
Daily Recommendation