前端vue的JsPDF html2canvas 生成pdf并以文件流形式上传到后端（转载）

原文地址

1.首先在文件内引入htmlToPdf.js
这里代码引入了html2canvas和jspdf
//需要 npm i html2Canvas 和 npm i jspdf

在这里将getPdf 这个函数挂载到Vue的原型上，最后return一个promise对象(包含了resolve的base64Pdf，以便于处理)，在局部组件内可进行.then以进行上传后端等操作。

插件代码如下

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
  install(Vue, options) {
    /**
     *
     * @param {*} reportName 下载时候的标题
     * @param {*} isDownload  是否下载默认为下载，传false不下载
     */
    Vue.prototype.getPdf = function (reportName, isDownload = true) {
      //     var target = document.getElementsByClassName("right-aside")[0];
      // target.style.background = "#FFFFFF";
      return new Promise((resolve, reject) => {
        var title = reportName;
        html2Canvas(document.querySelector('#pdfDom'), {
          allowTaint: true
        }).then((canvas) => {
          let contentWidth = canvas.width
          let contentHeight = canvas.height
          //一页pdf显示html页面生成的canvas高度;
          let pageHeight = contentWidth / 592.28 * 841.89
          //未生成pdf的html页面高度
          let leftHeight = contentHeight
          //页面偏移
          let position = 0
          //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
          let imgWidth = 595.28
          let imgHeight = 592.28 / contentWidth * contentHeight
          let pageData = canvas.toDataURL('image/jpeg', 1.0)
          let PDF = new JsPDF('', 'pt', 'a4')
          //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
          //当内容未超过pdf一页显示的范围，无需分页
          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()
              }
            }
          }
          if (isDownload) {
            PDF.save(title + '.pdf')
          }
          // 删除本地存储的base64字段
          var pdfData = PDF.output('datauristring')//获取base64Pdf
          resolve(pdfData)
        }
        )
      })
    }
  }
}

接下在main.js直接引入刚刚的代码文件

import htmlToPdf from '@/utils/htmlToPdf'

在局部组件时，准备下载时

<button @click="toGetPdf(0)">下载PDF</button>//这种情况是只下载，不上传后端
<button @click="toGetPdf(1, 0)">下载PDF</button>//这种情况是只走上传后端接口，不下载

 toGetPdf(val = false, download = true) {
      /**
     * val 决定走不走上传接口，默认为不上传给后端
     * download 默认是下载
     * /

      /* */
      this.$nextTick(() => {
        setTimeout(() => {
          window.scrollTo(0, 0);     //这行代码很重要，它让页面的滚动条跳到了最上方如果点击打印按钮的时候,滚动条没有在最上方,打印内容会是不完整的,体验也会差
          let title ="个人报告"
          this.getPdf(title, download) //download：false为不下载，这里调用了刚刚引用的全局函数，.then得到的值是base64位的pdf文件
            .then((res) => {
              if (val) {
                console.log("准备上传");
                this.UploadPdf(res);
              } else {
                console.log("不上传");
              }
            });
        }, 1000);
      });
    },

下两个函数是上传文件的接口和base64转文件流的函数

由于是pdf的base64位至少需要1M，传给后端有些大，所以前端转成文件流formData形式传给后端

//上传pdf接口
    UploadPdf(res) {
     //res拿到base64的pdf
      let pdfBase64Str = res;
      let title ="上传给后端的个人报告"
      var myfile = this.dataURLtoFile(pdfBase64Str, title + ".pdf");//调用一下下面的转文件流函数
      var formdata = new FormData();
      formdata.append("file", myfile); // 文件对象
      //该uploadMy为接口，直接以formdata格式传给后台
      uploadMy(formdata)
        .then((res) => {
          console.log("上传pdf接口", res);
        })
        .catch((err) => {
          console.log("上传pdf接口", err);
        });
    },
    

/*
将base64转换为文件,接收2个参数，第一是base64，第二个是文件名字
最后返回文件对象
*/
   dataURLtoFile(dataurl, filename) {
      var arr = dataurl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, { type: mime });
    },

需要注意的是 上传文件的请求头为 ‘Content-Type’: ‘multipart/form-data’，post请求。

下面代码网络请求接口文件部分代码 为个人记录，不适用于所有人项目，且为部分代码。
通常做pdf下载有上面代码就足够了，下面可忽略

//api/index.js文件：

import $request from '@/utils/http'
let baseUrl = '/api/test'

if (process.env.NODE_ENV === 'development') {
  baseUrl = '/dev'
  bigDataUrl = '/service'
  collectUrl = '/collect'
}
// 上传文件-个人
export function uploadMy(data) {
  return $request.postUpload(baseUrl + '/common/upload', data)
}

//@/utils/http.js文件
import axios from './request'
/** post请求 lcl编写 请求头为上传的请求头*/
function postUpload(url, data,config) {
  return new Promise((resolve, reject) => {
    axios.post(url, data, config?config:{
     headers: {
        // 'Content-Type': 'application/x-www-form-urlencoded'
        'Content-Type': 'multipart/form-data'
      }
    }).then((res) => {
      // if (res.data.code === '801' || res.data.code === '802' || res.data.code === '804') {
      //   removeToken()
      //   router.push({ name: 'login' })
      // }
      resolve(res.data)
    }).catch((err) => {
      reject(err)
    })
  })
}

//@/utils/request.js文件

import axios from 'axios'
// import { Message, MessageBox } from 'element-ui'
import store from '@/store'
import { getToken, removeToken} from '@/utils/auth'

// create an axios instance

const service = axios.create({
  // baseURL: process.env.VUE_APP_APIURL,
  // baseURL: "/api/test",
  timeout: 20000 // request timeout  超过20s则失败
})

// request interceptor
service.interceptors.request.use(
  config => {
    // Do something before request is sent
    // 让每个请求携带token-- ['Token']为自定义key 请根据实际情况自行修改
    if(store.getters.token) {
      config.headers['Authorization'] = store.getters.token
    }
    return config
  },
  error => {
    Promise.reject(error)
  }
)

// response interceptor
service.interceptors.response.use(
  // response => response,
  /**
   * 下面的注释为通过在response里，自定义code来标示请求状态
   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
   * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中
   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
   */

  response => {
    const res = response.data
    if (res.code !== 200 && res.code !== 204) {
      // Message({
      //   message: res.msg,
      //   type: 'error',
      //   duration: 5 * 1000
      // })
      if (res.code === 401  || res.code === 501 || res.code === 804) {
        // 请自行在引入 MessageBox
        // import { Message, MessageBox } from 'element-ui'
        // MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
        //   confirmButtonText: '重新登录',
        //   cancelButtonText: '取消',
        //   type: 'warning'
        // }).then(() => {
          removeToken();
          location.reload();
          store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          });

        // })
      }
      return Promise.reject(res)
    } else {
      return response
    }
  },
  error => {
    // Message({
    //   message: error.msg,
    //   type: 'error',
    //   duration: 5 * 1000
    // })
    return Promise.reject(error)
  }
)

export default service

以上便是利用JsPDF和html2canvas先获取屏幕快照，生成pdf并以文件流形式上传到后端，默认生成的pdf为A4纸大小。