最近做后台系统遇到挺多复杂的需求,比如导出pdf,word,excel
一般这种需求后端如果存文件,然后传个流过来,前端就可以下载导出了。
但是如果后端不存文件,只返回字符串(富文本字符串),这时候咋办?
= =不知道,但是我遇到了,也只能头铁干了。
吃货镇楼
路还是有的,讲一下实现方式:
html2canvas+jspdf
具体需求是在弹窗内预览,然后点击下载可以生成对应pdf,预览pdf如果后端没有给文件地址,只返回富文本字符串(类似"
123
"),比较难做,但是办法还是有的,个人感觉难点在于html2canvas生成完整截图的时机和pdf的分页。贴一下效果:
预览弹窗
生成的pdf文件
思路:由于pdf不可直接编辑,个人思路是先将html截屏转化成图片,再把图片嵌入生成pdf。
html2canvas:直接npm i html2canvas -S ,用法是截图dom然后转化为canvas,具体api可以去github上看。
直接贴代码(项目用的是elementUI,核心代码在preview2pdf这个方法):
正在生成
我是猪扒封面
下载
确定
import '@/utlis/html2canvas'
import '@/utlis/jspdf.debug'
import moment from "moment";
/*
*@description: 预览pdf弹窗
*@version V1.0
*@API:
*@ 参数 二选一, 二选一, 二选一
*previewDom 页面中可看见的预览目标类名 (比如富文本在页面中显示,其容器div类名为'.fuwenben',直接传'.fuwenben'就可以生成预览页面dom的pdf了)
*domData 页面中看不见的dom字符串(比如后台返回富文本字符串'
*@ 事件
* 需要在父组件指定关闭事件 onModalHidden
*