问题-vue预览页面导出

(68条消息) vue实现HTML转PDF (已解决清晰、页边距、图片导出等问题)_前端辣么菜的博客-CSDN博客 

        具体实现方法见上链接

        目前网上比较流行的将页面截图生成pdf的方式里，html2canvas+jspdf经我评测是最好用效果最好的，其他的不是只能截图导出当前页面就是效果特别不清晰，而这种方式可以按照指定dom来截取生成pdf，不是只能截取当前页面，还可以截取当前看不到的页面，适用于预览按钮和导出按钮在同一页面的功能 

         坑1：项目中使用core-js版本为2.6.12    babel-polyfill版本为6.26.0

        开发vue的core-js版本为2.6.12，jspdf中依赖的是最新版本3.x，就会导致启动vue的时候报  Can't resolve 'core-js/shim' in  \babel-polyfill\lib'；

        core-js升级到3以后，就会报Can‘t resolve ‘core-js/modules/es.symbol‘ ，与现有vue依赖包冲突，打包都打不了

解决办法：

        将jspdf中的polyfills.umd.js和jspdf.umd.js上传到服务器上，通过下面这种方式来引用，干掉jspdf依赖包，core-js版本不变还是为2.6.12，htmlToPdf.js中的new JsPDF改成window.jspdf.jsPDF

     坑2：如何在点击预览之前就能导出预览的内容，即导出“隐藏的dom”

解决办法：由于导出必须是可见才行，否则获取不到宽高，所以只能再复制一份预览页面，专门用于导出，在要导出的dom最外层div上添加自定义样式sideOut，将其移出屏幕从而实现“不可见”

.sideOut{
  position: absolute;top:-1999px;left:-999px;
  opacity: 0;z-index:-2;
}