1. 首先安装依赖npm install html2canvas jspdf --save
2. 封装方法：

// pdfMethod.js
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
const generateResume = (el, name) => {
  html2canvas(el).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) {
        //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= 841.89
        //避免添加空白页
        if (leftHeight > 0) {
          //添加新页
          pdf.addPage()
        }
      }
    }
    pdf.save(`${name}.pdf`)
  })
}
export default generateResume

3. 开始使用：

<template>
  <div class="priview_resume_container">
    <div style="font-size: 30px" @click="getResume">点这里下载</div>
  </div>
</template>

<script>
  export default {
    name: 'priviewResume',
    methods: {
      getResume() {
        generateResume(
        document.getElementsByClassName('priview_resume_container')[0],
        '测试'
        )
      }
    },
    components: {}
  }
</script>

这里用class类名包裹的所有html样式都会按照vue展现的样式被canvas绘出来并以pdf文件输出

vue项目，axios去请求接口

request文件中代码：

import request from "封装好的axios请求文件"

//下载用户手册PDF时请求的接口
export const getGuide = (param) => {
    return request({
      url:"请求url",
      method:"get",
      params:param,
      //一定要加responseType
      responseType: "blob"
    })
  }

页面中点击下载按钮时，去请求文件流，然后执行下载操作
代码如下：

downloadGuide(){
        getGuide().then(res => {
          let blob = new Blob([res], {type: 'application/pdf'});
          let downloadElement = document.createElement("a");
          let href = window.URL.createObjectURL(blob); //创建下载的链接
          downloadElement.href = href;
          downloadElement.download = `用户手册-${this.name}`    //下载后的文件名，根据需求定义
          document.body.appendChild(downloadElement);
          downloadElement.click(); //点击下载
          document.body.removeChild(downloadElement); //下载完成移除元素
          window.URL.revokeObjectURL(href); //释放掉blob对象
        })
    }

html:

<button @click="downloadPDf">downloadPDf</button>
 

js:

 

   

    

   
   

    

      downloadPDf() {
    
   

   

    

   
   

    

             axios.post(
     'http://localhost:8080/static/test.pdf', {
    
   

   

    

   
   

    
          
     responseType: 
     'blob', 
     //重要
    
   

   

    

   
   

    

             }).then(
     response => {
    
   

   

    

   
   

    
          
     const url = 
     window.URL.createObjectURL(
     new Blob([response.data]));
    
   

   

    

   
   

    
          
     const link = 
     document.createElement(
     'a');
    
   

   

    

   
   

    
          
     let fname = 
     'report.pdf';
    
   

   

    

   
   

    

               link.href = url;
    
   

   

    

   
   

    

               link.setAttribute(
     'download', fname);
    
   

   

    

   
   

    
          
     document.body.appendChild(link);
    
   

   

    

   
   

    

               link.click();
    
   

   

    

   
   

    

             })
    
   

   

    

   
   

    

           }
    
   

   

    

   
   

    

         }
    
   
 

记住本地文件一定要放在static文件夹下面。