Vue导出页面为PDF格式，并且上传保存至服务器

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第29天，点击查看活动详情

Vue导出页面为PDF格式

1、我们要添加两个模块

css
 代码解读
复制代码
第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

2、定义全局函数..创建一个htmlToPdf.js文件在指定位置.

javascript
 代码解读
复制代码
// 导出页面为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'')
      }
      )
    }
  }
}

3、在main.js中使用我们定义的函数文件。

javascript
 代码解读
复制代码
import htmlToPdf from ''@/components/utils/htmlToPdf''
Vue.use(htmlToPdf)

4、在需要的导出的页面..调用我们的getPdf方法即可.

html

bash
 代码解读
复制代码
<div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
    //给自己需要导出的ui部分.定义id为"pdfDom".此部分将就是pdf显示的部分
</div>
<button type="button" class="btn btn-primary"v-on:click="getPdf()">导出PDF</button>

js

arduino
 代码解读
复制代码
export default {
  data () {
      return {
      htmlTitle: ''页面导出PDF文件名''
      }
  }
 }

导出pdf文档，并且上传保存至服务器

1、添加两个模块

css
 代码解读
复制代码
第一个.将页面html转换成图片
npm install --save html2canvas 
第二个.将图片生成pdf
npm install jspdf --save

2、将生成pdf的代码写在print.js里

arduino
 代码解读
复制代码
import html2Canvas from ''html2canvas''
import JsPDF from ''jspdf''
​
export default function getPdf (element) {
  const base = html2Canvas(element, {
    allowTaint: true
  }).then(async (canvas) => {
    const contentWidth = canvas.width
    const contentHeight = canvas.height
    // 一页pdf显示html页面生成的canvas高度;
    const pageHeight = (contentWidth / 573.28) * 841.89
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight
    // 页面偏移
    let position = 0
    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    const imgWidth = 555.28
    const imgHeight = (592.28 / contentWidth) * contentHeight
    const pageData = canvas.toDataURL(''image/jpeg'', 1.0)
    // 第一个参数： L横向  P纵向
    // 第二个参数：测量单位
    // 第三个参数：导出格式 默认a4 
    const pdf = new JsPDF(''l'', ''pt'', ''a5'')
    // const pdf = new JsPDF('''', ''pt'', [contentWidth, contentHeight]) // 不分页
    // pdf.addImage(pageData, "JPEG", 0, 0, contentWidth, contentHeight);    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
    // 当内容未超过pdf一页显示的范围，无需分页
    if (leftHeight < pageHeight) {
      pdf.addImage(pageData, ''JPEG'', 11, 70, 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(''他项权证证书'' + ''.pdf'')
    // 将pdf输入为base格式的字符串
    const buffer = pdf.output(''datauristring'')
    return buffer
  })
​
  return base
}
​

3、在要打印的页面中导入print

javascript
 代码解读
复制代码
import getPdf from ''./print''

4、实现上传

javascript
 代码解读
复制代码
//点击打印事件
async onBook{
    //调用getPdf方法，获取打印的盒子
    const res = await getPdf(document.querySelector(''#box''))
    // 将base64格式的字符串转换为file文件
    const myfile = this.base64ConvertFile(res, ''导出文件名'')
    const formdata = new FormData()
    formdata.append(''file'', myfile)
    // 上传请求  
}，
//将base64转换为文件对象
function dataURLtoFile(dataurl, filename) {
    var arr = dataurl.split('','');
    var mime = arr[0].match(/:(.*?);/)[1];
    var bstr = atob(arr[1]);
    var n = bstr.length; 
    var u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    //转换成file对象
    return new File([u8arr], filename, {type:mime});
    //转换成成blob对象
    //return new Blob([u8arr],{type:mime});
}
​