前端转换为pdf的方法之一

利用插件html2canvas 和jspdf

第一步安装 html2canvas 和jspdf

npm install html2canvas --save //html页面转换成图片

npm install jspdf --save //把base64转换为PDF

第二步检查是否有图片，没有图片直接进入第三步

根据后台方法

import axios from 'axios'

export function img2base64(src) {

  return axios({

    method: 'post',

    url: ``,//自己的url

    data: { src: src }

  })

}

第三步建立htmlToPdf.js文件 ，我编写的路径为utils/htmlToPdf，如果只需要导出，到下面的PDF.save(title + '.pdf') //到此可以直接下载

打印的话，需要接口转换

// html文档转换为pdf

import axios from 'axios'

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

const url = '' //自己的url地址

var PDF = new JsPDF('', 'pt', 'a4')

export function getPdf(title,id){

  html2Canvas(document.querySelector(`#${id}`), {

    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)

    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') //到此可以直接下载

      // 生产pdf 直接在网页预览 有图片的话，需要调用接口转换

      var dataUrl = PDF.output('dataurlstring')

      var request = {

        order_type: 1,

        base64: dataUrl,

      }

      axios({

        method: 'post',

        url: `${url}/application/upload/PDFupload`,

        data: request

      }).then(res => {

        const url1 = `${url}${res.data.data}`

        window.open(url1, '_blank')

      })

  }

  )

}

第四步，需要打印为页面，加入以以下代码，我这只是个模板，可以根据自己的需求及样式修改

<template>

  <div>

    <!-- 这里就是要变成图片的容器 -->

    <div id="pdfHtml" ref="printHtml" style="text-align: center">

      <img :src="img_src"/>

      多大的 hdhdhdhhdhda哈哈哈哈哈哈哈哈哈

    </div>

    <button type="primary" @click="exportPDF">导出PDF</button>

  </div>

</template>

<script>

import { getPdf } from "@/utils/htmlToPdf";

import { img2base64 } from '@/api/upload'

export default {

  data(){

   return{

    img_src:'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'

   }

  },

  created(){

   this.img_tobase64()

  },

  methods: {

      img_tobase64() {

      img2base64(this.img_src).then(res => {

        this.img_src = res.data.data

      })

      },

    // 导出PDF

    exportPDF() {

      getPdf("测试", "pdfHtml");

    },

  },

};

</script>

<style>

</style>