vue-pdf实现pdf预览、分页、下载、打印

npm install --save vue-pdf-signature

 <el-dialog
        title="pdf预览"
        width="75%"
      >
        <div class="toolbar">
          <div class="toolbar_center">
            <div class="paging">
              <span>{{ currentPage }}</span>
              <span>/</span>
              <span>{{ numPages }}</span>
            </div>
            <span class="line" />
            <div class="zoom">
              <img src="../../static/image/reduce.png" alt="" >
              <span>120%</span>
              <img src="../../static/image/plus.png" alt="" class="plus_img" >
            </div>
          </div>
          <div class="toolbar_right">
            <!-- <div class="pdf_download" @click="handleDownfile(index)"> -->
            <div class="pdf_download">
              <img src="../../static/image/download.png" alt="" @click="downPdf()" >
              <span>下载</span>
            </div>
            <el-button class="printing" @click.stop="print">
              <span class="el-icon-printer" />
              <span>打印</span>
            </el-button>
          </div>
        </div>
        <div class="dialog_content">
          <div class="dialog_content_pdf">
            <el-scrollbar style="height:800px">
              <pdf
                v-for="currentPage in numPages"
                id="pdf"
                ref="pdf"
                :src="pdfSrc"
                :page="currentPage"
                class="pdf"
                @num-pages="pageNum = $event"
                @progress="loadedRatio = $event"
                @loaded="loadPdfHandler = $event"
              />
            </el-scrollbar>
          </div>

          <div class="dialog_content_tablbar" />
        </div>
      </el-dialog>

import pdf from 'vue-pdf-signature'
import CMapReaderFactory from 'vue-pdf-signature/src/CMapReaderFactory'

export default {
    compoents: {
         pdf
    },
    data() {
        return {
           pdfSrc: '', // pdf绑定的url链接
           numPages: null, // 循环的pdf总页数
           pageNum: 4, // pdf总页数
        }
    },
    methods: {
         seePdf(index) {
      this.dialogVisible = true
      this.$http.queryRegionlist('', this.filterDateTime, this.region, this.filterDateTime).then(res => {
        this.currentPage = res.data.current
        this.pdfSrc = pdf.createLoadingTask({  //接口中的url用createLoadingTask方法
          url: res.data.records[index].url,
          cMapPacked: true,
          CMapReaderFactory
        })
        // 计算总页数实现分页展示多页
        this.pdfSrc.promise
          .then(pdf => {
            this.numPages = pdf.numPages
          })
          .catch(err => {
            console.error('pdf 加载失败', err)
          })
      })
    },
    }
}

 downPdf() {
        window.open( url )  // url代表接口中后端给的pdf的url 
  }

    import download from 'downloadjs'  //引入download.js

// 下载pdf
  downPdf() { 
        this.$http.downloadFile(this.ids).then(data => {
            download(data)
      })
    }

npm install html2canvas jspdf --save

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default{
  install (Vue, options) {
    Vue.prototype.getPdf = function () {
      var title = this.htmlTitle
      html2Canvas(document.querySelector('#pdfDom'), {
        allowTaint: 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')
      }
      )
    }
  }
}

import htmlToPdf from '@/components/utils/htmlToPdf'
// 使用Vue.use()方法就会调用工具方法中的install方法
Vue.use(htmlToPdf)

//html
 <div id="pdfDom">
   <!-- 要下载的HTML页面,页面是由后台返回 -->
  <div v-html="pageData"></div>
</div>
<el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>

//js
export default {
  data () {
      return {
      htmlTitle: '页面导出PDF文件名'
      }
  }
 }

 // 打印
    print() {
      console.log(this.$refs.pdf)  // 这儿的console.log 仅用于测试打印出多个结果
         this.$refs.pdf.print()
    },