主要是通過wkhtmltopdf生成pdf，但是不支持css3，想要更好的支持css樣式可以使用node環境的puppeteer，關於puppeteer的使用可以點這里瞬移使用puppeteer生成pdf與截圖
vue-cli3好像不支持wkhtmltopdf（可以自行研究一下），這里是說一下vue-cli2使用wkhtmltopdf遇到的一些問題
一、使用element-ui打包后不支持某些語法，需要安裝 babel-polyfill
npm i babel-polyfill- 在項目
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
npm i promise-polyfill- 在 main.js 中引入
import 'promise-polyfill/src/polyfill' - 安裝完成后發現也是支持async await的
三、路由不支持異步引入，需要改為同步
// src/router/index.js
import Index from '@/views/index.vue'
routes: [{
path: '/index',
// component: () => import('@/views/index.vue')
component: Index
}]
四、使用echarts時遇到的一些問題
- 引入echarts的div寬高寫在css中不生效，暫時寫到了標簽style樣式中是可以的，並且是寫死的像素值。。
- 防止pdf分頁時echarts圖被分割成兩部分的解決方法可以在外層div添加css樣式
page-break-inside: avoid;
五、使用element-ui時遇到的一些問題
- 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上
六、其他的一些問題
- 如果下載pdf，需要通過html結構生成pdf，所以就需要先獲取dom結構拼成html字符串，所以css樣式必須寫在style行內標簽中（也可以把一些公共樣式提出來，用class名代替）。
- 不支持innerWidth，正常Vue中可以直接打印出innerWidth的值，如果echarts中用到innerWidth計算的數據會不生效。
- 不支持flex，可用 display:-webkit-box; 代替（但是-webkit-box仍然替代不了flex-box，我一般都是用inline-block布局，注意父級元素設置font-size: 0就可以了）。
七、總結
- 不建議使用wkhtmltopdf（github已停止更新），這也不支持那也不支持，坑賊多……時間都浪費在填坑上了。
- 建議使用puppeteer（chrome團隊開發），完美支持css3，非常nice好使。