JSPDF生成文件直接上传服务器保存
最近在搞毕设,遇到一个问题,纪念踩坑两天。。。需求:前端Vue使用jsPDF生成一个PDF文件,在不经过用户操作的情况下直接上传服务器保存。坑:必须用字节流传输,否则汉字图片无法显示。字节流与字符流的区别见我之前的博客。先上端代码finalSub(){this.pdf = new jsPDF("", "pt", "a4");// fon...
·
最近在搞毕设,遇到一个问题,纪念踩坑两天。。。
需求:前端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);
}
测试满足需求。
更多推荐
已为社区贡献1条内容
所有评论(0)