前端vue如何使用pptxgen.js導出PPT
更新時間：2024年01月23日 08:51:19 作者：Э時間行者于我
最近公司項目有個導出ppt的功能,在使用ppexgen.js一周完成功能之后,這篇文章主要給大家介紹了關于前端vue如何使用pptxgen.js導出PPT的相關資料,需要的朋友可以參考下
前言
公司新需求需要導出ppt給業(yè)務用，查閱資料后發(fā)現(xiàn)也挺簡單的，記錄一下。
1.安裝包
npm install pptxgenjs --save
2.引入包
在需要使用的文件中引入
import Pptxgen from "pptxgenjs"
導出事件
<Button type="primary" @click="exportPPT">導出周報</Button>
這里有幾個注意點說一下
- slide 當前PPT頁，可以通過addText(),addTable()等方法在當前頁面添加文字、圖表、圖片等元素
- Text 文字，可以對ppt文字顏色、字體大小、字體陰影、背景顏色、文字位置等屬性進行配置，達到自己想要的效果
- Table 表格， 可以添加ppt表格，但是表格內只能放文字和數(shù)字
- Charts 圖表 圖表，可以支持常見的餅狀圖、柱狀圖、折線圖等，配置項也挺全的，橫縱坐標，legend等啥都有，基本可以滿足常用。
3.使用
js代碼
exportPPT() {
// 1. 創(chuàng)建PPT
const pres = new Pptxgen()
// 2. 創(chuàng)建一個PPT頁面，每調用一次 pres.addSlide() 都可以生成一張新的頁面
// 建議把每個頁面的構造抽成一個個函數(shù)，然后通過函數(shù)調用生成新頁面，代碼不會很亂
const slide = pres.addSlide()
// 3. 調用addTetx()，在PPT頁面中插入文字“Hello World from PptxGenJS...”
// 括號里面是對文字的配置，文字橫坐標x為1.5，縱坐標y為1.5，字體顏色 363636……
// 關于坐標長度與px的轉換 x 1 = 127~128px 左右
slide.addText('需求進度', {
x: 0.2, // 橫坐標
y: 0.4,
color: '363636',
fontSize: 24, // 字號
fill: { color: 'F1F1F1' },
align: 'left'
})
const rows = []
// Row One: cells will be formatted according to any options provided to `addTable()`
rows.push(['序號', '需求標題', '預計發(fā)版時間', '完成時間', '進度情況', '備注'])
const border = [ // 表格邊框
{ pt: 0.5, color: '#4f4f4f' },
{ type: 'none' },
{ pt: 0.5, color: '#4f4f4f' },
{ type: 'none' }
]
const options = { valign: 'middle', border: border, color: '0000ff' } // 單元格樣式配置
// Row Two: set/override formatting for each cell
rows.push([
{ text: '1', options },
{ text: '對接小包物流商：京東國際=獲取包裹軌跡狀態(tài)', options },
{ text: '2023-11-02 00:00:00', options },
{ text: '2023-11-12 00:00:00', options },
{ text: '開發(fā)中', options },
{ text: '備注哦', options }
], [
{ text: '2', options },
{ text: '對接小包物流商：邦遞國際 BDGJ', options },
{ text: '2023-11-22 00:00:00', options },
{ text: '2023-11-15 00:00:00', options },
{ text: '已上線', options },
{ text: '測試', options }
])
slide.addTable(rows,
{
x: 0.5,
y: 1.0,
w: 9.0,
h: 3,
fontSize: 16,
colW: [0.75, 2.0, 0.85, 0.8], // 表格每一列寬度
rowH: 0.31, // 單元格默認高度
color: '363636'
}
)
// EX B: Pass the same objects as a cell's `text` value
const arrTabRows = [
[
{ text: 'Cell 1 A', options: { fontFace: 'Arial' } },
{ text: 'Cell 1 B', options: { fontFace: 'Courier' } }
]
]
slide.addTable(arrTabRows, { x: 0.5, y: 4.5, w: 9, h: 1, colW: [1.5, 1.5, 6] })
const slide2 = pres.addSlide()
// 3. 調用addTetx()，在PPT頁面中插入文字“Hello World from PptxGenJS...”
// 括號里面是對文字的配置，文字橫坐標x為1.5，縱坐標y為1.5，字體顏色 363636……
// 關于坐標長度與px的轉換 x 1 = 127~128px 左右
slide2.addText('Amazon平臺', {
x: 0.4, // 橫坐標
y: 0.4,
color: '363636',
fontSize: 24, // 字號
fill: { color: 'F1F1F1' },
align: 'center'
})
slide2.addText('2023-10-01至2023-10-07主要國家發(fā)貨發(fā)布', {
x: 0.5, // 橫坐標
y: 0.8,
color: '363636',
fontSize: 24, // 字號
fill: { color: 'F1F1F1' },
align: 'center'
})
// let pres = new pptxgen();
const dataChartAreaLine = [
{
name: '菜鳥-平郵',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789]
},
{
name: '菜鳥-掛號',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789]
},
{
name: '順友-平郵',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [2000, 4200, 5156, 3167, 6510, 8009, 6006, 5855, 10102, 11789]
},
{
name: '順友-掛號',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [1300, 2100, 3456, 4567, 4010, 6009, 7006, 6855, 8102, 10789]
},
{
name: '燕文-平郵',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [2000, 4200, 5156, 3167, 6510, 8009, 6006, 5855, 10102, 11789]
},
{
name: '燕文-掛號',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [1300, 2100, 3456, 4567, 4010, 6009, 7006, 6855, 8102, 10789]
}
]
slide2.addChart(pres.ChartType.bar, dataChartAreaLine,
{
x: 0.6,
y: 1.2,
w: 8,
h: 3.5,
title: 'Amazon平臺' // 標題
}
)
const tempResult3 = '英國上漲5%，德國上漲10%，法國上漲12%，意大利上漲6%，西班牙上漲10%，XXXXX'
slide2.addText(tempResult3, {
x: 0.5, // 橫坐標
y: 5.2,
color: '363636',
fontSize: 18, // 字號
fill: { color: 'F1F1F1' },
align: 'center'
})
const slide3 = pres.addSlide()
// 3. 調用addTetx()，在PPT頁面中插入文字“Hello World from PptxGenJS...”
// 括號里面是對文字的配置，文字橫坐標x為1.5，縱坐標y為1.5，字體顏色 363636……
// 關于坐標長度與px的轉換 x 1 = 127~128px 左右
slide3.addText('SMT平臺', {
x: 0.5, // 橫坐標
y: 0.5,
color: '363636',
fontSize: 24, // 字號
fill: { color: 'F1F1F1' },
align: 'center'
})
// let pres = new pptxgen();
const dataChartAreaLine3 = [
{
name: '菜鳥-平郵',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [4500, 4000, 3156, 3167, 8510, 8009, 6006, 7855, 11102, 12789]
},
{
name: '菜鳥-掛號',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [3000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789]
},
{
name: '順友-平郵',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [2000, 4200, 5156, 3167, 6510, 8009, 6006, 5855, 10102, 11789]
},
{
name: '順友-掛號',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [1300, 2100, 3456, 4567, 4010, 6009, 7006, 6855, 8102, 10789]
},
{
name: '燕文-平郵',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [2000, 4200, 5156, 3167, 6510, 8009, 6006, 5855, 10102, 11789]
},
{
name: '燕文-掛號',
labels: ['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西', '智利'],
values: [1300, 2100, 3456, 4567, 4010, 6009, 7006, 6855, 8102, 10789]
}
]
slide3.addChart(pres.ChartType.bar, dataChartAreaLine3,
{ x: 0.8, y: 1, w: 8, h: 3 }
)
const rows3 = []
// Row One: cells will be formatted according to any options provided to `addTable()`
rows3.push(['美國', '英國', '德國', '法國', '意大利', '西班牙', '加拿大', '墨西哥', '巴西'])
// const border3 = [ // 表格邊框
// { pt: 0.5, color: '#4f4f4f' },
// { type: 'none' },
// { pt: 0.5, color: '#4f4f4f' },
// { type: 'none' }
// ]
// const options = { valign: 'middle', border: border3, color: '0000ff' } // 單元格樣式配置
// Row Two: set/override formatting for each cell
// options 這個options是上面公用的，如果不共用，單獨拉一個
rows3.push([
{ text: '1500', options },
{ text: '4600', options },
{ text: '5156', options },
{ text: '3167', options },
{ text: '3167', options },
{ text: '3167', options },
{ text: '3167', options },
{ text: '3167', options },
{ text: '3167', options }
], [
{ text: '1500', options },
{ text: '3600', options },
{ text: '5156', options },
{ text: '1167', options },
{ text: '3167', options },
{ text: '2167', options },
{ text: '3167', options },
{ text: '4167', options },
{ text: '3167', options }
])
slide3.addTable(rows3,
{
x: 1.2,
y: 4,
w: 8.0,
h: 1.5,
fontSize: 12,
colW: [0.75, 2.0, 0.85, 0.8], // 表格每一列寬度
rowH: 0.25, // 單元格默認高度
color: '363636'
}
)
slide3.addText('總計', {
x: 0.6, // 橫坐標
y: 4.5,
color: '363636',
fontSize: 12, // 字號
fill: { color: 'F1F1F1' },
align: 'left'
})
slide3.addText('其它', {
x: 0.6, // 橫坐標
y: 4.9,
color: '363636',
fontSize: 12, // 字號
fill: { color: 'F1F1F1' },
align: 'left'
})
pres.author = '作者_abin'
pres.company = '公司'
// 4. 生成PPT， 括號中的fileName，就是生成的 PPT名字，可以使用 .then 或者 .catch處理對應事件。
pres.writeFile({ fileName: '20231124周報6.2.pptx' }).then(() => {
this.$Message.success('導出成功')
})
},總結
到此這篇關于前端vue如何使用pptxgen.js導出PPT的文章就介紹到這了,更多相關前端vue導出PPT內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue中使用v-for時為什么不能用index作為key，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
這篇文章主要介紹了vue實現(xiàn)點擊當前標簽高亮效果的思路詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
下面小編就為大家分享一篇vue+webpack實現(xiàn)異步組件加載的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構建單頁面應用,下面這篇文章主要給大家介紹了關于降低vue-router版本的2種解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
本文討論了watch函數(shù)是如何利用副作用函數(shù)和options進行封裝實現(xiàn)的，也通過調度函數(shù)去控制回調函數(shù)的立即執(zhí)行和執(zhí)行時機，還可以解決競態(tài)問題，感興趣的可以了解一下2022-04-04
vue-cli3自動消除console.log()的調試信息方式
這篇文章主要介紹了vue-cli3自動消除console.log()的調試信息方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
大家可以用 v-model 指令在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定。這篇文章主要介紹了vue表單詳解,需要的朋友可以參考下2018-04-04
由于在項目中需要對數(shù)據(jù)進行可視化處理,也就是用圖表展示,眾所周知echarts是非常強大的插件,所以這篇文章主要給大家介紹了關于vue+echarts圖表使用的相關資料,需要的朋友可以參考下2021-09-09
今天小編就為大家分享一篇vue中,在本地緩存中讀寫數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue是一套用于構建用戶界面的漸進式JavaScript框架,是目前最火的前端框架之一,是前端工程師的必備技能,下面這篇文章主要給大家介紹了關于Vue3.2.x中的小技巧及注意事項的相關資料,需要的朋友可以參考下2022-04-04