关于SpringBoot，Vue项目实现前端预览pdf文件流的解决方案

关于SpringBoot，Vue项目实现前端预览pdf文件流的解决方案

最近听到小伙伴遇到一个问题，要实现页面预览pdf功能，今天我就花点时间捣鼓了一下。当然解决方案有很多种，这里就介绍一下比较简单的实现方法。

1.首先我们先写后台接口，这里我们以输出流的形式来实现，这里一般数据库存储文件时以BLOB类型（也就是二进制字符串）来进行存储，这个可以Java可以用Object对象进行承接。Mybatis可以直接映射到实体类，用get方法来获取，使用pdfbox提供的工具类可以修改预览时的文件名, 话不多说，直接上代码。

controller层

/**
     * 显示pdf
     */
    @RequestMapping("/showPdf")
    public void showPDF(HttpServletResponse response, @RequestParam("id") Long id) {
        Map<String,Object> fileMap = queryPdfService.showPdf(id);
        String pdfName = "工作手册.pdf";
        //在这里设置头信息
        response.setContentType("application/pdf;charset=UTF-8");
        response.setHeader("Content-Disposition", "inline");
        OutputStream out = response.getOutputStream();
        byte[] bt = (byte[])fileMap.get("FILE");
        try(InputStream inputStream = new ByteArrayInputStream(bt)){
            // 需要引入pdfbox依赖,这里只是为了修改在浏览器上预览时展示的文件名,如果不需要,别的方式输出也可以
            PDDocument document = PDDocument.load(inputStream);
            PDDocumentInformation info = document.getDocumentInformation(); //获得文档属性对象
            info.setTitle(pdfName); //此方法可以修改pdf预览文件名
            document.setDocumentInformation(info);
            document.save(out); //输出
            document.close();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

所用的依赖

<dependency>
   <groupId>org.apache.pdfbox</groupId>
   <artifactId>pdfbox</artifactId>
   <version>2.0.19</version>
</dependency>

service层

	/**
     * 查找pdf
     * @param 文件id
     */
    public Map<String,Object> showPdf(Long id) throws Exception {
        return queryPdfDao.showPdf(id);
    }

dao层

Map<String, Object> showPdf(@Param("id") Long id)

xml层

<resultMap id="fileMap" type="map">
	<result column="FILE_CONTENT" property="FILE" jdbcType="BLOB" typeHandler="org.apache.ibatis.type.BlobTypeHandler"/>
</resultMap>

<select id="showPdf" resultMap="fileMap">
	SELECT FILE_CONTENT FROM FILE_TABLE WHERE ID = #{id}
</select>

2.前端代码可以用Vue来实现，当然方法有很多，这里可以参考。

<el-link @click="queryPdf" >预览pdf</el-link>

 queryPdf() {
      axios({
        methods: 'get',
        url: 'pdf/showPdf',
        params: {
          //这里可以传参
          ID: this.ruleForm.ID
        },
        responseType: 'blob',
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        console.log(res)
          let blob = new Blob([res.data], {type: 'application/pdf'})
          let href = URL.createObjectURL(blob)
          //这个是你接口的地址
          //这将会新开一个浏览器标签页
          window.open('pdf/queryPDF?file='+encodeURIComponent(href));
      })
    },

今天的分享就到这里了，觉得有对你有帮助的话可以点赞加关注哦，我会不断分享一些开发的小技巧，如果小伙伴们有什么疑问的话，可以在评论区留言哦，我看到了会第一时间给出解答的🤞。