HTML 转 PDF 图文报表实践

导出 PDF 图文报表实践

方法一： jsPDF

使用 jsPDF 时，需要注意的是其默认单位为 mm，需要在 new jsPDF() 时传入配置

const doc = new jsPDF({
    unit: 'px',
    format: 'a4'
})

这个方法废了。这个鬼东西多行文本和多个图片，简直要人命！

方法二： wkhtmltopdf

Vue SSR

使用 Vue.js ，需要 SSR 支持，否则页面为空白

使用 Nuxt.js 作为服务端渲染框架，这里记录一下遇到的问题和解决方案

1. 使用 Element UI，启动就报错 HTMLElement is not defined

Element UI 版本问题，使用最新的 2.8.x 会出现问题，则需要降版本并在 package.json 中配置版本策略，仅更新小版本范围

"element-ui": "~2.4.11",

2. JS的兼容问题

在使用 wkhtmltopdf 时，提示报错：Warning: http://localhost:3000/_nuxt/vendors.app.js:1941 SyntaxError: Parse error，估计是 ES6 的语法在wkhtmltopdf 的运行环境当中不支持，导致出现了这些错误提示。

官方Nuxt.js 2.6.X 版本其实给了 babel 的配置，默认会自动根据浏览器的运行环境做代码兼容，并不需要以下的这些设置（下面只是自己的实践过程，供参考），请直接使用第3点的解决方法。

Nuxt.js 2.6.X 文档

通过查找资料，发现 Nuxt.js 并没有加入 Babel 进行 ES6 -> ES5 的转换，下面是解决方法

1. 修改 nuxt.config.js，加入 babel-loader 相关配置
<