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

一、前端

(1)安装插件vue-pdf:npm install vue-pdf

(2)引入方式:import pdf from "vue-pdf";

(3)components注入方式:components:{pdf}

(4)前端预览按钮设置

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

(5)预览弹窗

java 复制代码
    <!-- 简历预览框 -->
    <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)预览的参数设置

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

(7)方法实现,调用showResume方法

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

java 复制代码
export function showResume(id){
  return request({
    url: '/resumes/resumes/show/' + id,
    method: 'get',
    responseType: 'blob'
  })
java 复制代码
    handleShow(row){
      const id = row.id
      showResume(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值获取简历的存储路径(简历存储在了本地)

java 复制代码
    @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()));
    }

三、实现效果

相关推荐
开开心心就好19 小时前
批量PDF转换工具,一键转换Word Excel
开发语言·前端·学习·pdf·电脑·word·excel
老家的回忆1 天前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
Vertira1 天前
pdf 合并 python实现(已解决)
前端·python·pdf
十一0829931 天前
【PDF-XSS攻击】springboot项目-上传文件-解决PDF文件XSS攻击
spring boot·pdf·xss
qq_393828222 天前
PDF的图片文字识别工具
windows·pdf·电脑·软件需求·图片处理
wsxqaz2 天前
浏览器原生控件上传PDF导致hash值不同
算法·pdf·哈希算法
工业3D_大熊11 天前
3D模式格式转换工具HOOPS Exchange如何将3D PDF转换为STEP格式?
3d·pdf·3d格式转换·3d模型格式转换·cad格式转换·cad数据格式转换·3d模型可视化
IDRSolutions_CN12 天前
在 Java 中生成 PDF 缩略图(教程)
java·经验分享·pdf·软件工程·团队开发
IDRSolutions_CN12 天前
用Java将PDF转换成GIF
java·经验分享·pdf·软件工程·团队开发
贤和兄12 天前
使用docx4j 实现word转pdf(linux乱码处理)
linux·pdf·word