VUE pdf 생 성 및 다운로드

인터넷 에서 많은 자 료 를 참고 한 후에 스스로 정리 했다.니 거 쓸 것 같 으 면 날 찾 아.
원본 다운로드:https://download.csdn.net/download/lyl815616/11956209
VUE 로 생 성 된 데모 로 정 리 했 습 니 다.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

데모 프로젝트 완료.관례 대로 다운로드 하면 다 들 아 시 잖 아 요.

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
    }
  ]
})

잘 됐 습 니 다. 이제 방문 입 니 다.효 과 를 시험 해 보 세 요.몇 명 없 는데 광고 가 없어 서 같이 소통 할 게 뭐 가 있어 요?