vue cli2 使用 wkhtmltopdf 踩坑指南

主要是通过wkhtmltopdf生成pdf，但是不支持css3，想要更好的支持css样式可以使用node环境的puppeteer，关于puppeteer的使用可以点这里瞬移使用puppeteer生成pdf与截图
vue-cli3好像不支持wkhtmltopdf（可以自行研究一下），这里是说一下vue-cli2使用wkhtmltopdf遇到的一些问题

一、使用element-ui打包后不支持某些语法，需要安装 babel-polyfill

1. npm i babel-polyfill
2. 在项目 build/webpack.base.conf.js 文件下修改 ./src/main.js 引入路径为 ['babel-polyfill', './src/main.js']

entry: {
  // app: './src/main.js'
  app: ['babel-polyfill', './src/main.js']
},

二、不支持 promise 需要安装 promise-polyfill

1. npm i promise-polyfill
2. 在 main.js 中引入 import 'promise-polyfill/src/polyfill'
3. 安装完成后发现也是支持async await的

三、路由不支持异步引入，需要改为同步

// src/router/index.js
import Index from '@/views/index.vue'
routes: [{
  path: '/index',
  // component: () => import('@/views/index.vue')
  component: Index
}]

四、使用echarts时遇到的一些问题

1. 引入echarts的div宽高写在css中不生效，暂时写到了标签style样式中是可以的，并且是写死的像素值。。
2. 防止pdf分页时echarts图被分割成两部分的解决方法可以在外层div添加css样式 page-break-inside: avoid;

五、使用element-ui时遇到的一些问题

1. el-table宽度无法设置为100%，目前设置的css样式为

/deep/ .el-table{
  .el-table__header{
    width: 100% !important;
    colgroup {
      display: none;
    }
  }
  .el-table__body{
    width: 100% !important;
  }
}

建议页面中尽量少使用element的组件去打印，因为大多组件都做了很多处理，打印出来的pdf会有各种问题，打印页面可以用原生的table，最好是打印和预览两个页面分开，这样不会浪费时间在调试element生成pdf的bug上

六、其他的一些问题

1. 如果下载pdf，需要通过html结构生成pdf，所以就需要先获取dom结构拼成html字符串，所以css样式必须写在style行内标签中（也可以把一些公共样式提出来，用class名代替）。
2. 不支持innerWidth，正常Vue中可以直接打印出innerWidth的值，如果echarts中用到innerWidth计算的数据会不生效。
3. 不支持flex，可用 display:-webkit-box; 代替（但是-webkit-box仍然替代不了flex-box，我一般都是用inline-block布局，注意父级元素设置font-size: 0就可以了）。

七、总结

1. 不建议使用wkhtmltopdf（github已停止更新），这也不支持那也不支持，坑贼多……时间都浪费在填坑上了。
2. 建议使用puppeteer（chrome团队开发），完美支持css3，非常nice好使。