当前位置：首页 > news >正文

若依框架之简历pdf文档预览功能

news 2025/6/29 1:32:21

一、前端

（1）安装插件vue-pdf：npm install vue-pdf

（2）引入方式：import pdf from "vue-pdf";

（3）components注入方式：components:{pdf}

（4）前端预览按钮设置

         <el-buttonsize="mini"type="text"icon="el-icon-view"@click="handleShow(scope.row)"v-hasPermi="['resumes:resumes:show']">预览</el-button>

（5）预览弹窗

    <!-- 简历预览框 --><el-dialog :title="title" :visible.sync="show" width="800px"  append-to-body><pdf v-for="pdfPage in previewData.pdfPages" :key="pdfPage" :page="pdfPage" :src="previewData.src"width="100%"></pdf></el-dialog>

（6）预览的参数设置

      //简历预览弹窗show:false,//pdf属性previewData:{type:"",src:"",pdfPages:[]},

（7）方法实现，调用showResume方法

将showResume方法返回数据的形式设置成blob流的形式


export function showResume(id){return request({url: '/resumes/resumes/show/' + id,method: 'get',responseType: 'blob'})

    handleShow(row){const id = row.idshowResume(id).then(res => {this.show = true;this.title="简历预览"let blob = new Blob([res]);this.previewData.type="pdf";this.previewData.src=URL.createObjectURL(blob);let loadingTask=pdf.createLoadingTask(this.previewData.src);loadingTask.promise.then(pdf=>{this.previewData.pdfPages=pdf.numPages;})});},

二、后端

（1）show方法的实现，入参是前端传回来的简历的id值，根据id值获取简历的存储路径（简历存储在了本地）

    @PreAuthorize("@ss.hasPermi('resumes:resumes:show')")@GetMapping("/show/{id}")public ResponseEntity<InputStreamResource> show(@PathVariable Long id) throws IOException {Resumes resumes=new Resumes();resumes=resumesService.selectResumesById(id);String path=resumes.getFileUrl();FileSystemResource file = new FileSystemResource(path);// 设置响应头HttpHeaders headers = new HttpHeaders();headers.add("Content-Disposition", String.format("attachment; filename=\"%s\"", file.getFilename()));return ResponseEntity.ok().headers(headers).contentLength(file.contentLength()).contentType(MediaType.parseMediaType("application/octet-stream")).body(new InputStreamResource(file.getInputStream()));}