文章目錄
- 前言
- 一、Echarts準備工作
- 1、查看是否安裝了Echarts
- 2、Echarts導入script 中
- 3、使用Echarts創建圖表
- 二、報表制作打印html2canvas和jsPDF準備工作
- 1、安裝html2canvas和jsPDF依賴包
- 2、html2canvas和jsPDF引用到script中
- 3、制作并打印報表
- 三、導出結果
前言
若依框架前端中,要使用一些文本、數據、圖表制作報表,然后導出,那么這個功能如何實現呢?
一、Echarts準備工作
1、查看是否安裝了Echarts
查看是否安裝了Echarts,方法是,終端運行:
npm list echarts
以下代表已安裝成功:
如果沒安裝則執行安裝依賴包:
npm install echarts --save
2、Echarts導入script 中
import * as echarts from 'echarts'
3、使用Echarts創建圖表
const numbers = ref(['加載中', '加載中'])onMounted(() => {setTimeout(() => {numbers.value = ['10', '30'] const present = parseInt(numbers.value[0]);const total = parseInt(numbers.value[1]);const absent = total - present;// 初始化圖表const chartDom = document.getElementById('attendanceChart');const myChart = echarts.init(chartDom);// 圖表配置const option = {// 提示框配置tooltip: {trigger: 'item', // 觸發類型為數據項觸發formatter: '{a} <br/>{b}: {c} ({d}%)' // 提示框格式化字符串// {a} 系列名稱, {b} 數據名稱, {c} 數值, {d} 百分比},// 圖例配置legend: {top: '0%', // 圖例距離容器頂部的距離left: 'center', // 圖例水平居中textStyle: { // 圖例文字樣式color: '#A6CAF4', // 文字顏色fontSize: 14 // 文字大小}},// 系列列表(一個圖表可以包含多個系列)series: [{name: '你好', // 系列名稱type: 'pie', // 圖表類型為餅圖radius: '100%', // 餅圖半徑(單個值表示餅圖,數組表示環圖)top: '20%', // 餅圖距離容器頂部的距離// 數據數組data: [{value: present, name: '我好', // 數據項名稱itemStyle: { // 數據項樣式color: '#91CC75' // 出勤部分顏色(綠色)}},{value: absent, // 數據值name: '未出勤', // 數據項名稱itemStyle: { // 數據項樣式color: '#409EF0' }}],// 平時不顯示外側標簽和引導線label: {show: false},labelLine: {show: false},// 鼠標懸停時顯示標簽(類似圖例效果)emphasis: {label: {show: true,position: 'inside', // 懸停時標簽顯示在內側formatter: '{b}: {d}%', // 顯示名稱和百分比color: '#ffff', // 文字顏色fontSize: 14},itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用配置項顯示圖表myChart.setOption(option);// 組件卸載時清理onBeforeUnmount(() => {// 如果圖表實例存在,則銷毀if (myChart) {myChart.dispose(); // 銷毀圖表實例,釋放資源}});}, 300) // 延遲模擬數據加載
})
二、報表制作打印html2canvas和jsPDF準備工作
1、安裝html2canvas和jsPDF依賴包
npm install html2canvas jspdf
2、html2canvas和jsPDF引用到script中
import html2canvas from 'html2canvas';
import { jsPDF } from 'jspdf'; // jspdf需解構導入
3、制作并打印報表
1、按鈕
<div>
<!-- 添加導出按鈕 --><button @click="exportTextAndChartAsPDF" class="export-btn">導出報表</button>
</div>
2、按鈕調用
const personnelData = [{ name: '張三', date: '2023-10-01', status: '出勤' },{ name: '李四', date: '2023-10-01', status: '缺勤' },{ name: '王五', date: '2023-10-02', status: '遲到' },
];const exportTextAndChartAsPDF = async () => {const pdf = new jsPDF('p', 'mm', 'a4'); // 縱向 A4 紙const lineHeight = 10; // 行高let startY = 40; // 初始 Y 坐標// 1. 添加標題pdf.setFontSize(16).setTextColor(0, 0, 0);pdf.text('人數報表', 105, 15, { align: 'center' });// 2. 添加表格標題行pdf.setFontSize(12);pdf.text('姓名', 20, 30);pdf.text('日期', 80, 30);pdf.text('狀態', 140, 30);// 3. 添加數據行personnelData.forEach((item, index) => {const currentY = startY + index * lineHeight;pdf.text(item.name, 20, currentY);pdf.text(item.date, 80, currentY);pdf.text(item.status, 140, currentY);});// 4. 截取餅圖并添加到 PDFconst chartContainer = document.getElementById('attendanceChart')?.parentNode; // 獲取餅圖容器(確保存在)if (chartContainer) {// 截圖餅圖區域const canvas = await html2canvas(chartContainer, {scale: 2, // 提高分辨率logging: false,useCORS: true, // 允許跨域圖片backgroundColor: '#FFFFFF', // 背景設為白色});// 計算餅圖在 PDF 中的位置(放在表格下方)const imgProps = { width: 80, height: 80 }; // 自定義餅圖大小(mm)const imgX = 60; // X 坐標(居中偏左)const imgY = startY + personnelData.length * lineHeight + 20; // Y 坐標(表格下方留 20mm 間距)// 添加餅圖到 PDFpdf.addImage(canvas.toDataURL('image/png'),'PNG',imgX,imgY,imgProps.width,imgProps.height);}// 5. 保存 PDFpdf.save('報表導出.pdf');
};
3、按鈕樣式
/* 添加導出按鈕樣式 */
.export-btn {position: absolute;top: 10px;right: 10px;z-index: 10;padding: 5px 10px;background-color: #409EFF;color: white;border: none;border-radius: 4px;cursor: pointer;
}.export-btn:hover {background-color: #66b1ff;
}