屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用

前言

⏲️本文阅读时长:约10分钟

主要目标:

1.实现Springboot与aspose-words整合,填充word模板并转化PDF;
2.前端vue整合vue-pdf实现PDF预览及下载

word模板重点(详见图示)

1.单属性赋值
2.List循环赋值
3.图片插入
4.对勾特殊符号插入

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第1张图片


干货代码

源码

https://gitee.com/javadog-net/boot-apose.git

文件夹 描述
boot-apose java后台
vue-apose 前端vue

对应工具下载

工具 描述 地址
aspose-words-19.1 word三方库 https://download.csdn.net/download/baidu_25986059/85390408
javadog-vue-pdf 因原版vue-pdf有兼容错误,此版本为本人修订自用版 https://www.npmjs.com/package/javadog-vue-pdf

结果预览

模板填充前空word模板

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第2张图片

代码填充后word模板

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第3张图片

web端vue预览的html的pdf

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第4张图片

最终填充后下载的pdf

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第5张图片


技术涉及

‍♂️后端框架

技术 名称 参考网站
Spring Boot MVC框架 https://spring.io/projects/spring-boot
Maven 项目构建 http://maven.apache.org
aspose-words 本地依赖word工具包 https://download.csdn.net/download/baidu_25986059/85390408
lombok Java库 https://projectlombok.org/
hutool 工具类 http://hutool.mydoc.io

‍♀️前端框架

技术 名称 参考网站
VUE MVVM框架 https://cn.vuejs.org//
Element UI UI库 https://element.eleme.cn/2.0/#/zh-CN
javadog-vue-pdf PDF文件在线预览库(个人修复兼容版) https://www.npmjs.com/package/javadog-vue-pdf
axios 基于promise网络请求库 http://www.axios-js.com/

正文

虽然浪费的时间有点多,不过磨刀不误砍柴工

前置条件

  • 后台springboot基础项目
  • vue基础项目
⭐ 如没有基础代码可以直接下载狗哥Gitee源码

步骤解析

后台
1.下载对应的aspose-words-19.1-jdk16.jar,加入POM本地依赖

因原版收费且会有水印等不确定因素,直接下载jar包本地依赖或者上传私服

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第6张图片

 
        
            com.aspose
            aspose-words
            jdk16
            system
            1.0
            ${project.basedir}/src/main/resources/lib/aspose-words-19.1-jdk16.jar
        
2.放置模板文件到资源路径下

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第7张图片

3.controller读取模板文件并填充数据
  1. 读取模板并将输入流转为doc,并设置文件名及返回类型

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第8张图片

  1. 定位【照片】书签位置,插入图片

在这里插入图片描述

  1. 定位【等级】书签位置,插入对应字符

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第9张图片
书签插入参考如下

  • 找到需要插入的图片的地方,鼠标焦点聚焦
    屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第10张图片
  • 点击【插入】找到书签并点击,然后录入书签名,并点击添加
    屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第11张图片
  • 检查书签是否添加成功

    • 更新doc
      屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第12张图片

      • 将基础数据填充后并转为PDF

    屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第13张图片

    详见如下代码
    package apose.javadog.net.controller;
    import apose.javadog.net.entity.BaseInfo;
    import apose.javadog.net.entity.Education;
    import apose.javadog.net.entity.Interview;
    import apose.javadog.net.entity.WorkExperience;
    import cn.hutool.core.util.CharsetUtil;
    import com.aspose.words.Document;
    import com.aspose.words.DocumentBuilder;
    import com.aspose.words.ReportingEngine;
    import com.aspose.words.SaveFormat;
    import lombok.extern.slf4j.Slf4j;
    import org.springframework.core.io.ClassPathResource;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletResponse;
    import java.io.InputStream;
    import java.net.URLEncoder;
    import java.util.ArrayList;
    import java.util.List;
    
    @RestController
    @RequestMapping("/word")
    @Slf4j
    public class WordController {
    
     @GetMapping("/pdf")
     void pdf(HttpServletResponse response){
         // 获取资源doc路径下的简历interview.doc模板
         final  ClassPathResource classPathResource = new ClassPathResource("doc\\interview.doc");
         // 组装数据
         final Document doc;
         try (InputStream inputStream = classPathResource.getInputStream();
              ServletOutputStream outputStream = response.getOutputStream()) {
             // 文件名称
             String fileName = URLEncoder.encode("帅锅的简历.pdf", CharsetUtil.UTF_8);
             response.reset();
             response.setHeader("Content-Disposition", "attachment; filename=\"" + fileName + "\"");
             response.setHeader("Access-Control-Allow-Origin", "*");
             response.setContentType("application/octet-stream;charset=UTF-8");
             // 将输入流转为doc
             doc = new Document(inputStream);
             // doc构建
             DocumentBuilder builder = new DocumentBuilder(doc);
             // 定位书签位置
             builder.moveToBookmark("AVATAR");
             // 插入图片
             builder.insertImage("https://portrait.gitee.com/uploads/avatars/user/491/1474070_javadog-net_1616995139.png!avatar30");
             // 定位LANGUAGE_LEVEL4书签位置
             builder.moveToBookmark("LANGUAGE_LEVEL4");
             // 设置字符名称
             builder.getFont().setName("Wingdings");
             // 设置字符大小
             builder.getFont().setSize(14);
             // 对号字符
             builder.write("\uF0FE");
             // 定位LANGUAGE_LEVEL6书签位置
             builder.moveToBookmark("LANGUAGE_LEVEL6");
             // 设置字符名称
             builder.getFont().setName("Wingdings");
             builder.getFont().setSize(20);
             builder.write("□");
             doc.updateFields();
             final ReportingEngine engine = new ReportingEngine();
             // 将数据填充至模板
             engine.buildReport(doc, getInterviewData(), "data");
             // 转pdf
             doc.save(outputStream, SaveFormat.PDF);
         } catch (Exception e) {
             log.error("生成报告异常,异常信息:{}", e.getMessage(), e);
             e.printStackTrace();
         }
     }
    
     private Interview getInterviewData(){
         Interview interview = new Interview();
         this.getBaseInfo(interview);
         this.getEducations(interview);
         this.getWorkExperiences(interview);
         return interview;
     }
    
     /**
      * @Description: 组装基本数据
      * @Param: [interview]
      * @return: [apose.javadog.net.entity.Interview]
      * @Author: hdx
      * @Date: 2022/5/10 15:39
      */
     private void getBaseInfo(Interview interview){
         // 基本数据
         BaseInfo baseInfo = new BaseInfo();
         List listStr = new ArrayList<>();
         listStr.add("后端技术栈:有较好的Java基础,熟悉SpringBoot,SpringCloud,springCloud Alibaba等主流技术,Redis内存数据库、RocketMq、dubbo等,熟悉JUC多线程");
         listStr.add("后端模板引擎:thymeleaf、volocity");
         listStr.add("前端技术栈:熟练掌握ES5/ES6/、NodeJs、Vue、React、Webpack、gulp");
         listStr.add("其他技术栈: 熟悉python+selenium、electron");
         baseInfo.setName("狗哥")
                 .setBirth("1993年5月14日")
                 .setHeight("180")
                 .setWeight("70")
                 .setNation("汉")
                 .setSex("男")
                 .setNativePlace("济南")
                 .setMarriage("已婚")
                 .setSpecialtys(listStr);
         interview.setBaseInfo(baseInfo);
     }
     /**
      * @Description: 组装教育经历
      * @Param: [interview]
      * @return: [apose.javadog.net.entity.Interview]
      * @Author: hdx
      * @Date: 2022/5/10 15:40
      */
     private void getEducations(Interview interview){
         // 高中
         List educations = new ArrayList<>();
         Education education = new Education();
         education.setStartEndTime("2009-2012")
                 .setSchool("山东省实验中学")
                 .setFullTime("是")
                 .setProfessional("理科")
                 .setEducationalForm("普高");
         educations.add(education);
         // 大学
         Education educationUniversity = new Education();
         educationUniversity.setStartEndTime("2012-2016")
                 .setSchool("青岛农业大学")
                 .setFullTime("是")
                 .setProfessional("计算机科学与技术")
                 .setEducationalForm("本科");
         educations.add(educationUniversity);
         interview.setEducations(educations);
     }
    
     /**
      * @Description: 组装工作经历
      * @Param: [interview]
      * @return: [apose.javadog.net.entity.Interview]
      * @Author: hdx
      * @Date: 2022/5/10 15:40
      */
     private void getWorkExperiences(Interview interview){
         // 工作记录
         List workExperiences = new ArrayList<>();
         WorkExperience workExperience = new WorkExperience();
         workExperience.setStartEndTime("2009-2012")
                 .setWorkUnit("青岛XXX")
                 .setPosition("开发")
                 .setResignation("有更好的学习空间,向医疗领域拓展学习纬度");
         workExperiences.add(workExperience);
         interview.setWorkExperiences(workExperiences);
     }
    }
    
前端
1.下载对应的依赖包
npm install
2.在vue.config.js中配置代理
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    port: 1026,
    proxy: {
      '/': {
        target: 'http://localhost:8082', //请求本地 需要ipps-boot后台项目
        ws: false,
        changeOrigin: true
      }
    }
  }
})
npm install
3.在main.js引入所需插件
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import axios from 'axios'
Vue.prototype.$http = axios
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
new Vue({
  render: h => h(App),
}).$mount('#app')
4.页面引入vue-pdf组件
  
   
5.页面中使用axios调取接口获取数据

注意responseType类型为blob

this.$http({
      method: 'get',
      url: `/word/pdf`,
      responseType: 'blob'
    }).then(res=>{
      console.log(res)
      this.pdfUrl = this.getObjectURL(res.data)
      console.log(this.pdfUrl)
      const loadingTask = pdf.createLoadingTask(this.pdfUrl)
      // // 注意这里一定要这样写
      loadingTask.promise.then(load => {
        this.numberPage = load.numPages
      }).catch(err => {
        console.log(err)
      })
      this.loading = false;
    })
页面完整代码如下



异常情况

1.vue-pdf原版与webpack版本问题,会启动不起来,所以本狗才偷梁换柱,改了一下并自用

2.aspose-words-19.1-jdk16.jar 如果采用官网的maven依赖,可能需要自助破解或交费使用

成果展示

屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用_第14张图片

JavaDog 狗屋地址
个人博客 https://blog.javadog.net
公众号 https://mp.weixin.qq.com/s/_vgnXoQ8FSobD3OfRAf5gw
CSDN https://blog.csdn.net/baidu_25986059
掘金 https://juejin.cn/user/2172290706716775
知乎 https://www.zhihu.com/people/JavaDog
简书 https://www.jianshu.com/u/1ff9c6bdb916
gitee https://gitee.com/javadog-net
GitHub https://github.com/javadog-net

你可能感兴趣的:(屎上最全vue-pdf+Springboot与aspose-words整合,开箱即用)