宜宾网站建设公司

Vue+ElementUI使用vue-pdf实现预览功能

Vue + ElementUI项目中使用vue-pdf实现简单预览，供大家参考，具体内容如下

创新互联建站自成立以来，一直致力于为企业提供从网站策划、网站设计、网站设计、网站建设、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

1、安装 vue-pdf

npm install --save vue-pdf

2、在vue页面中导入对应的组件

我这是通过点击 预览 按钮 获取id打开一个dialog来实现


 
     

        
           上一页
         
         
         下一页
        
     当前第{{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);
  }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。


当前标题：Vue+ElementUI使用vue-pdf实现预览功能
URL分享：http://ybzwz.com/article/pichch.html

其他资讯