vue html转pdf并打印

//文件名随便取一个如：htmlToPdf.js

// 导出页面为PDF格式

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

import store from '../store'

export default {

  install (Vue, options) {

    Vue.prototype.getPdf = function (title) {

      var element = document.querySelector('#' + title); // 这个dom元素是要导出pdf的div容器

      setTimeout(() => {

        html2Canvas(element, {

          allowTaint: true,

          taintTest: false,

          useCORS: true,

          async: true,

          scale: '1', // 放大倍数

          dpi: '192', // 精度

        }).then(function (canvas) {

          //未生成pdf的html页面高度

          var leftHeight = canvas.height;

          var a4Width = 595.28

          var a4Height = 841.89

          //一页pdf显示html页面生成的canvas高度;

          var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height);

          //pdf页面偏移

          var position = 0;

          var pageData = canvas.toDataURL('image/jpeg', 1.0);

          var pdf = new JsPDF('x', 'pt', 'a4');

          var index = 0,

            canvas1 = document.createElement('canvas'),

            height;

          pdf.setDisplayMode('fullwidth', 'continuous', 'FullScreen');

          // $('.head-content').append($(

          //     '<div class="pdfTip">' +

          //     '   <div>正在生成第<span class="pdfProgress">1</span>页，共<span class="pdfTotal"></span>页...' +

          //     '</div>'));

          function createImpl (canvas) {

            if (leftHeight > 0) {

              index++;

              var checkCount = 0;

              if (leftHeight > a4HeightRef) {

                var i = position + a4HeightRef;

                for (i = position + a4HeightRef; i >= position; i--) {

                  var isWrite = true

                  for (var j = 0; j < canvas.width; j++) {

                    var c = canvas.getContext('2d').getImageData(j, i, 1, 1).data

                    if (c[0] != 0xff || c[1] != 0xff || c[2] != 0xff) {

                      isWrite = false

                      break

                    }

                  }

                  if (isWrite) {

                    checkCount++

                    if (checkCount >= 10) {

                      break

                    }

                  } else {

                    checkCount = 0

                  }

                }

                height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef);

                if (height <= 0) {

                  height = a4HeightRef;

                }

              } else {

                height = leftHeight;

              }

              canvas1.width = canvas.width;

              canvas1.height = height;

              // console.log(index, 'height:', height, 'pos', position);

              var ctx = canvas1.getContext('2d');

              ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height);

              var pageHeight = Math.round(a4Width / canvas.width * height);

              // pdf.setPageSize(null, pageHeight)

              if (position != 0) {

                pdf.addPage();

              }

              pdf.addImage(canvas1.toDataURL('image/jpeg', 1.0), 'JPEG', 0, 0, a4Width, a4Width / canvas1.width * height);

              leftHeight -= height;

              position += height;

              // $('.pdfProgress').text(index + 1);

              // $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));

              if (leftHeight > 0) {

                setTimeout(createImpl, 500, canvas);

              } else {

                store.commit('setdisplayshow', true)

                document.getElementById("iframe123").src = pdf.output('datauristring');

                //   pdf.save(pdfName + '.pdf');

                // var blob = pdf.output("blob")

                // let formData = new FormData();

                // formData.append("dir", 'sz');

                // formData.append("ori", 1);

                // formData.append("origName", Date.parse(new Date()) + '.pdf');

                // formData.append("Filedata", blob);

                // Vue.prototype.$post('v1/rest/file/uploadOSS', formData, {

                //   succeedHandler: res => {

                //     window.open(res.data.path, '_blank')

                //     // var link = document.createElement('a')

                //     // link.download = Date.parse(new Date()) + '.pdf'

                //     // link.style.display = 'none';

                //     // link.href = res.data.path

                //     // document.body.appendChild(link);

                //     // link.click();

                //     // document.body.removeChild(link);                                                

                //     Toast.clear()

                //   }

                // })

                // // $('.pdfTip').remove();

              }

            }

          }

          //当内容未超过pdf一页显示的范围，无需分页

          if (leftHeight < a4HeightRef) {

            pdf.addImage(pageData, 'JPEG', 0, 0, a4Width, a4Width / canvas.width * leftHeight);

            //   pdf.save(pdfName + '.pdf')

            // var blob = pdf.output("blob")

            // let formData = new FormData();

            // formData.append("dir", 'sz');

            // formData.append("ori", 1);

            // formData.append("origName", Date.parse(new Date()) + '.pdf');

            // formData.append("Filedata", blob);

            // Vue.prototype.$post('v1/rest/file/uploadOSS', formData, {

            //   succeedHandler: res => {

            //     window.open(res.data.path, '_blank')

            //     // var link = document.createElement('a')

            //     // link.download = Date.parse(new Date()) + '.pdf'

            //     // link.style.display = 'none';

            //     // link.href = res.data.path

            //     // document.body.appendChild(link);

            //     // link.click();

            //     // document.body.removeChild(link);                                                

            //     Toast.clear()

            //   }

            // })

            store.commit('setdisplayshow', true)

            document.getElementById("iframe123").src = pdf.output('datauristring');

          } else {

            try {

              pdf.deletePage(0);

              // $('.pdfTip').show();

              // $('.pdfTotal').text(index + Math.ceil(leftHeight / a4HeightRef));

              setTimeout(createImpl, 500, canvas);

            } catch (err) {

              console.log(err);

            }

          }

        });

      }, 0);

    }

  }

}

 

//vue页面

<el-button @click="printProduct">打印</el-button>

    <iframe id="iframe123" frameborder="0" :width='$store.state.displayshow?"100%":"0"'  :height='$store.state.displayshow?"700":"0"'></iframe>

      //打印

      printProduct(){

        let prt='print_'+this.typenum

        this.getPdf(prt)

      },