JSPDF生成文件直接上传服务器保存

最近在搞毕设，遇到一个问题，纪念踩坑两天。。。

需求：前端Vue使用jsPDF生成一个PDF文件，在不经过用户操作的情况下直接上传服务器保存。

坑：必须用字节流传输，否则汉字图片无法显示。字节流与字符流的区别见我之前的博客。

先上端代码

finalSub(){
      
      this.pdf = new jsPDF("", "pt", "a4");

      // fonts support
      this.pdf.addFileToVFS("font.ttf", font);
      this.pdf.addFont("font.ttf", "ali", "normal");
      this.pdf.addFont("font.ttf", "ali", "bold");
      this.pdf.setFont("ali");
          var datauri = this.pdf.output('dataurlstring');
          var base64  = datauri.split("base64,")[1];
          var data={'data':base64};
          finalSave(data)
          .then(res=>{
            if(res.data.code==0){
              alert("本年度报告存档成功");
            }else{
              alert("存档失败");
            }
          }).catch(err=>{
            alert(res.data.message);
          });
    },

值得注意的是，网上很多代码里面对于base64的字符串获取方法都是pdf.output("dataurlstring").substring(28);，这个是有问题的，很多时候对于我们个人来讲base64加密子串未必从28开始，比如我的就是从51开始，所以采用分割字符串的形式比较稳妥。

另外jsPDF提供的方法output可以输出不同的信息，此处参数为dataURLstring含义是将pdf文件的信息以url字符串的形式输出，将这个字符串传到后端即可。

后端：

@PostMapping("finalSave")
    public JsonResult finalSave(@RequestBody HashMap<String, String> u){
        
        BufferedOutputStream bos=null;
        try {
            Date date = new Date(); // 创建日期格式化对象,在获取格式化对象时可以指定风格
            DateFormat df = new SimpleDateFormat("yyyy");
            String str = df.format(date);
            File f =new File(str+".pdf");
            if(!f.exists()){
                f.createNewFile();
            }

            bos = new BufferedOutputStream(new FileOutputStream(f));
            byte[] b = Base64.getDecoder().decode(u.get("data"));
            bos.write(b);
           
        } catch (IOException e) {
            e.printStackTrace();
            return new JsonResult(ResultCode.FALSE,true);
        }finally {


            try {
                bos.flush();
                bos.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        return new JsonResult(ResultCode.SUCCESS,true);
    }

测试满足需求。