【web應用】若依框架中,使用Echarts導出報表為PDF文件

文章目錄

  • 前言
  • 一、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;
}

三、導出結果

在這里插入圖片描述

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/913991.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/913991.shtml
英文地址,請注明出處:http://en.pswp.cn/news/913991.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

優選算法 --(雙指針算法 1~8)

引言&#xff1a;此專欄為記錄算法學習&#xff0c;本專題作為算法學習的第一部分&#xff0c;優選算法專題共計100題&#xff0c;分為不同小模塊進行&#xff0c;算法學習需堅持積累&#xff0c;時代不會辜負長期主義者&#xff0c;僅以此句&#xff0c;與君共勉。 講解算法分…

XRDMatch代碼復現與分析報告

XRDMatch代碼復現與分析報告 1. 項目概述 XRDMatch是一個用于X射線衍射(XRD)數據匹配和分析的開源工具,由zhengwan-chem開發并托管在GitHub上。本項目旨在復現XRDMatch的核心功能,并對其實現進行詳細分析。 X射線衍射是材料科學中用于確定晶體結構的重要技術,通過分析衍射…

SpringAI×Ollama:Java生態無縫集成本地大模型實踐指南

摘要 隨著大語言模型(LLM)的普及,數據隱私和技術棧統一性成為企業級AI應用的核心挑戰。本文系統闡述如何通過SpringAI框架與Ollama本地化模型引擎的結合,構建安全高效的生成式AI應用。通過實戰案例解析配置優化、流式響應、工具調用等關鍵技術,為Java開發者提供零Python依…

從采購申請到報廢核銷:如何用數字化縫合企業物資管理的“斷點”?

在企業的日常運營中&#xff0c;物資管理是一項至關重要的工作。從采購申請到物資的入庫、使用&#xff0c;再到最終的報廢核銷&#xff0c;這一系列流程就像一條長長的鏈條&#xff0c;環環相扣。然而&#xff0c;在傳統管理模式下&#xff0c;這條鏈條上卻存在著諸多“斷點”…

AVL平衡二叉樹

01. 初始AVL樹 AVL樹是最早發明的自平衡二叉搜索樹。在AVL樹中&#xff0c;任何節點的兩個子樹的高度差&#xff08;平衡因子&#xff09;最多為1&#xff0c;這使得AVL樹能夠保持較好的平衡性&#xff0c;從而保證查找、插入和刪除操作的時間復雜度都是O(log n)。包含n個節點…

教育行業可以采用Html5全鏈路對視頻進行加密?有什么優勢?

文章目錄前言一、什么是Html5加密&#xff1f;二、使用Html5對視頻加密的好處三、如何采用Html5全鏈路對視頻進行加密&#xff1f;四、教育行業采用Html5全鏈路視頻加密有什么優勢&#xff1f;總結前言 面對優質課程盜錄傳播的行業痛點&#xff0c;教育機構如何守護核心知識產…

Vue3 tailwindcss

1、安裝tailwindcsspnpm i -D tailwindcss postcss autoprefixer # yarn add -D tailwindcss postcss autoprefixer # npm i -D tailwindcss postcss autoprefixer2、 創建TailwindCSS配置文件npx tailwindcss init -ptailwind.config.js/** type {import(tailwindcss).Config}…

提示工程:解鎖大模型潛力的核心密碼

以下是對Lilian Weng的提示工程權威指南&#xff08;原文鏈接&#xff09;的深度解析與博客化重構&#xff0c;融入最新行業實踐&#xff1a; 提示工程&#xff1a;解鎖大模型潛力的核心密碼 ——從基礎技巧到工業級解決方案全解析 一、重新定義人機交互范式 傳統編程 vs 提示…

Python3郵件發送全指南:文本、HTML與附件

在 Python3 中&#xff0c;使用內置的 smtplib 庫和 email 模塊發送郵件是一個常見的需求。以下是更詳細的實現指南&#xff0c;包含各種場景的解決方案和技術細節&#xff1a;一、發送純文本郵件的完整實現準備工作&#xff1a;確保已開通 SMTP 服務&#xff08;各郵箱開啟方式…

CSS和CSS3區別對比

CSS&#xff08;層疊樣式表&#xff09;與CSS3&#xff08;CSS的第三個版本&#xff09;的區別主要體現在功能擴展、語法特性以及應用場景等方面。以下是兩者的核心對比&#xff1a; 一、核心概念與版本關系CSS&#xff1a;是基礎樣式表語言&#xff0c;用于分離網頁內容與樣式…

JVM--監控和故障處理工具

一、命令行工具 1. jps (Java Process Status) 作用&#xff1a;列出當前系統中所有的 Java 進程 常用命令&#xff1a; jps -l # 顯示進程ID和主類全名 jps -v # 顯示JVM啟動參數 輸出示例&#xff1a; 1234 com.example.MainApp 5678 org.apache.catalina.startup.Bootstra…

推薦 7 個本周 yyds 的 GitHub 項目。

01.開源的 CRM 軟件這是一個開源的客戶關系管理&#xff08;CRM&#xff09;系統&#xff0c;現在又 32.5K 的 Star。為企業和團隊提供比肩 Salesforce 等商業產品的功能&#xff0c;同時強調用戶自主權、數據自由與高度可定制性。開源地址&#xff1a;https://github.com/twen…

linux網絡編程之單reactor模型(一)

Reactor 是一種事件驅動的設計模式&#xff08;Event-Driven Pattern&#xff09;&#xff0c;主要用于處理高并發 I/O&#xff0c;特別適合網絡服務器場景。它通過一個多路復用機制監聽多個事件源&#xff08;如 socket 文件描述符&#xff09;&#xff0c;并在事件就緒時將事…

瀏覽器重繪與重排

深入解析瀏覽器渲染&#xff1a;重排(Reflow)與重繪(Repaint)的性能陷阱與優化策略作為一名前端開發者&#xff0c;你是否遇到過界面突然卡頓、滾動時頁面抖動或輸入框響應遲鈍&#xff1f;這些常見性能問題背后&#xff0c;往往是重排與重繪在作祟。本文將深入剖析瀏覽器渲染機…

day049-初識Ansible與常用模塊

文章目錄0. 老男孩思想-人脈的本質1. Ansible1.1 密鑰認證1.2 安裝ansible1.3 添加ansible配置文件1.4 配置主機清單文件&#xff08;Inventory&#xff09;1.5 測試1.6 ansible的模塊思想1.7 command模塊1.8 需求&#xff1a;每臺服務器的密碼都不同&#xff0c;怎么批量執行業…

力扣網編程134題:加油站(雙指針)

一. 簡介 前面兩篇文章使用暴力解法&#xff0c;或者貪心算法解決了力扣網的加油站問題&#xff0c;文章如下&#xff1a; 力扣網編程150題&#xff1a;加油站&#xff08;暴力解法&#xff09;-CSDN博客 力扣網編程150題&#xff1a;加油站&#xff08;貪心解法&#xff09…

XPath 語法【Web 自動化-定位方法】

&#x1f9ed; XPath 語法簡介&#xff08;Web 自動化核心定位手段&#xff09;一、XPath 是什么&#xff1f;XPath&#xff08;XML Path Language&#xff09;是用于在 XML/HTML 文檔中定位節點的語言&#xff0c;由 W3C 標準定義。瀏覽器支持的是 XPath 1.0。應用場景廣泛&am…

記一次 Linux 安裝 docker-compose

一.下載 1.手動下載 下載地址&#xff1a;https://github.com/docker/compose/releases 下載后&#xff0c;放在/usr/local/bin/目錄下&#xff0c;命名為&#xff1a;docker-compose 2.命令下載 sudo curl -L "https://github.com/docker/compose/releases/download/…

Go語言WebSocket編程:從零打造實時通信利器

1. WebSocket的魅力&#xff1a;為什么它這么火&#xff1f;WebSocket&#xff0c;簡單來說&#xff0c;就是一種在單條TCP連接上實現全雙工通信的神器。相比HTTP的請求-響應模式&#xff0c;它像是一條隨時暢通的電話線&#xff0c;客戶端和服務器可以隨時“喊話”&#xff0c…

速學 RocketMQ

目錄 本地啟動&測試&可視化 核心概念 集群 主從 集群 Dledger 集群 總結 客戶端消息確認機制 廣播模式 消息過濾機制 順序消息機制 延遲消息與批量消息 事務消息機制 ACL權限控制體系 RocketMQ客戶端注意事項 消息的 ID、Key、Tag 最佳實踐 消費者端…