当前位置：首页 > VUE

vue实现导出打印

2026-02-17 16:16:18VUE

Vue实现导出功能

使用xlsx库可以方便地实现Excel导出功能。安装依赖后，通过以下代码实现：

npm install xlsx

import * as XLSX from 'xlsx';

exportExcel() {
  const data = [
    ['姓名', '年龄', '性别'],
    ['张三', 25, '男'],
    ['李四', 30, '女']
  ];

  const ws = XLSX.utils.aoa_to_sheet(data);
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  XLSX.writeFile(wb, '导出数据.xlsx');
}

Vue实现打印功能

使用浏览器原生打印API实现打印功能：

vue实现导出打印

printPage() {
  window.print();
}

对于需要打印特定区域的内容：

printSpecificArea() {
  const printContent = document.getElementById('print-area').innerHTML;
  const originalContent = document.body.innerHTML;

  document.body.innerHTML = printContent;
  window.print();
  document.body.innerHTML = originalContent;
}

使用vue-print-nb插件

安装插件后可以更方便地实现打印功能：

vue实现导出打印

npm install vue-print-nb

import Print from 'vue-print-nb';

Vue.use(Print);

<template>
  <div id="print-area">
    <!-- 打印内容 -->
  </div>
  <button v-print="'#print-area'">打印</button>
</template>

使用html2canvas和jsPDF实现PDF导出

对于需要导出为PDF的场景：

npm install html2canvas jspdf

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

exportPDF() {
  const element = document.getElementById('export-area');

  html2canvas(element).then(canvas => {
    const imgData = canvas.toDataURL('image/png');
    const pdf = new jsPDF();
    pdf.addImage(imgData, 'PNG', 0, 0);
    pdf.save('导出文件.pdf');
  });
}

样式处理

为打印添加特定样式：

@media print {
  body * {
    visibility: hidden;
  }
  #print-area, #print-area * {
    visibility: visible;
  }
  #print-area {
    position: absolute;
    left: 0;
    top: 0;
  }
}

标签: vue