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;
  }
}

六、其他的一些问题

1. 不支持innerWidth，正常Vue中可以直接打印出innerWidth的值，如果echarts中用到innerWidth计算的数据会不生效