VUE生成pdf并下载

参考了网上好多资料 然后加上自己整理。如果觉得用到了你的可以找我 我贴上来源。

源码下载：https://download.csdn.net/download/lyl815616/11956209

基于VUE生成的Demo来整理的。
vue-cil构建一个项目:环境什么的我就不说了。
我自己的后台地址。这个不用复制！

    proxyTable: {
      "/api": {
        target: "http://192.168.1.60:80/",
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
        // onProxyReq: function(proxyReq, req, res) {
        //   //实在不知道代理后的路径，可以在这里打印出出来看看
        //   console.log("原路径：" + req.originalUrl, "代理路径：" + req.path);
        // }
      },

      "/sso": {
        target: "http://192.168.xxx.xxx:xxx/", //设置你调用的接口域名和端口号 别忘了加http
        changeOrigin: true,
        pathRewrite: {
          "^/sso": "" //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://40.00.100.100:3002/user/add'，直接写‘/api/user/add’即可
        }
      }
    },

vue init webpack vuedemo

Demo项目完成。照例下载 大家都懂滴。

npm install 
或者
cnpm install 

接下来 安装两个插件。

npm install --save html2canvas
或者
cnpm install --save html2canvas

npm install --save jspdf
或者	
cnpm install --save jspdf

安装完成后 将需要的js文件 还有需要的pdf页面(需要下载的) 放入文件夹
我直接贴源码了。
这是插件的js内容：

// 下面两个package要单独安装
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function (id,title) {
      html2Canvas(document.querySelector(`#${id}`), {
        // allowTaint: true
        useCORS:true//看情况选用上面还是下面的，
      }).then(function (canvas) {
            let contentWidth = canvas.width
            let contentHeight = canvas.height
            let pageHeight = contentWidth / 592.28 * 841.89
            let leftHeight = contentHeight
            let position = 0
            let imgWidth = 595.28
            let imgHeight = 592.28 / contentWidth * contentHeight
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            let PDF = new JsPDF('', 'pt', 'a4')
            if (leftHeight < pageHeight) {
                PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
            } else {
            while (leftHeight > 0) {
                  PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                  leftHeight -= pageHeight
                  position -= 841.89
                  if (leftHeight > 0) {
                      PDF.addPage()
                  }
              }
            }
            PDF.save(title + '.pdf')
        }
      )
    }
  }
}

这个是需要打印的页面。具体数据也可以去后台查出绑定在页面上(根据自己需要的可以修改)：

<template>

<div>
        <span id="exportBtn" @click="daochu">导出</span>

  <div class="electronicInvoice" id="wrap">
    <h1>订单信息</h1>
    <div class="orderInfoList">
      <ul>
        <li>
          <b>订单批次号：</b>
          <span>xxxxx_xxxxxxxx</span>
        </li>
        <li>
          <b>企业名称：</b>
          <span>xxxxxxxxxx</span>
        </li>
        <li>
          <b>收货地址：</b>
          <span>xxxxxxx</span>
        </li>
        <li>
          <b>收货人：</b>
          <span>xx</span>
        </li>
        <li>
          <b>手机号：</b>
          <span>18888888888</span>
        </li>
        <li>
          <b>统一社会信用代码：</b>
          <span>xxxxxxxxxxxxxxx</span>
        </li>
      </ul>
    </div>

    <div class="orderInfoTable">
      <table border="1">
        <tr>
          <th>序号</th>
          <th>订单号</th>
          <th>商品编号</th>
          <th>商品名称</th>
          <th>数量</th>
          <th>下单时间</th>
          <th>金额合计（单位：元）</th>
          <th>支付状态</th>
        </tr>
        <tr>
          <td>1</td>
          <td>129236598</td>
          <td>240114</td>
          <td>庙湾香菇 陕西耀州 香菇酱礼盒 6瓶 装</td>
          <td>43</td>
          <td>2019/10/22 16:24:57</td>
          <td>3354</td>
          <td>已支付</td>
        </tr>
        <tr>
          <td>1</td>
          <td>129236598</td>
          <td>240114</td>
          <td>庙湾香菇 陕西耀州 香菇酱礼盒 6瓶 装</td>
          <td>43</td>
          <td>2019/10/22 16:24:57</td>
          <td>3354</td>
          <td>已支付</td>
        </tr>
      </table>
    </div>

    <div class="orderAmount">
      <span>订单总金额（单位：元）： 26445</span>
    </div>

    <div class="orderSeal">
      <span>盖章：</span>
      <img src="static/images/xxxx.png" />
    </div>
  </div>

</div>
        

</template>

<script>

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted () {
    
  },
  methods: {
    daochu(){
      this.getPdf('wrap',"123")

    }
  },
}
</script>
 
<style scoped>
.electronicInvoice {
  width: 1200px;
  margin: 5% auto;
  font-size: 12px;
  color: #000;
}

.electronicInvoice h1 {
  padding-top:10%;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.electronicInvoice .orderInfoList {
  margin: 2% 5%;
  line-height: 18px;
}

.electronicInvoice .orderInfoList b {
  display: inline-block;
  width: 140px;
}

.electronicInvoice .orderInfoTable {
  margin-left: 5%;
  text-align: center;
}

.electronicInvoice table {
  width: 90%;
  text-align: center;
}

.electronicInvoice table tr {
  height: 20px;
}

.electronicInvoice table td {
  padding: 0 1%;
}

.electronicInvoice .orderAmount {
  margin: 2% 0 0 8%;
}

.electronicInvoice img {
  width: 250px;
  /* height: 190px; */
}

.electronicInvoice .orderSeal{
  margin-right: 16%;
  text-align: right;
}
</style>

main.js 中引用插件

	import htmlToPdf from '@/views/workbench/pdf/a'  //pdf插件  路径自己修改自己的
	
	Vue.use(htmlToPdf)  //pdf插件

放入后 路由配置下 需要打印的页面路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import pdfGenerate from '@/pdfGenerate'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/pdf',
      name: 'pdfGenerate',
      component: pdfGenerate
    }
  ]
})

这就OK 了 接下来就是访问了。试试效果吧…
QQ：11852104，备注: CSDN。