js大屏导出图片_前端生成pdf？jspdf+html2canvas实现pdf预览和导出

最近做后台系统遇到挺多复杂的需求，比如导出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这个方法)：

正在生成

我是猪扒封面

找不到pdf文件

下载

确定

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字符串(比如后台返回富文本字符串'

111

',直接传进来就可以生成pdf)

*@ 事件

* 需要在父组件指定关闭事件 onModalHidden

*