前端vue如何使用pptxgen.js導(dǎo)出PPT
更新時間：2024年01月23日 08:51:19 作者：Э時間行者于我
最近公司項目有個導(dǎo)出ppt的功能,在使用ppexgen.js一周完成功能之后,這篇文章主要給大家介紹了關(guān)于前端vue如何使用pptxgen.js導(dǎo)出PPT的相關(guān)資料,需要的朋友可以參考下
前言
公司新需求需要導(dǎo)出ppt給業(yè)務(wù)用，查閱資料后發(fā)現(xiàn)也挺簡單的，記錄一下。
1.安裝包
npm install pptxgenjs --save
2.引入包
在需要使用的文件中引入
import Pptxgen from "pptxgenjs"
導(dǎo)出事件
<Button type="primary" @click="exportPPT">導(dǎo)出周報</Button>
這里有幾個注意點說一下
- slide 當(dāng)前PPT頁，可以通過addText(),addTable()等方法在當(dāng)前頁面添加文字、圖表、圖片等元素
- Text 文字，可以對ppt文字顏色、字體大小、字體陰影、背景顏色、文字位置等屬性進行配置，達(dá)到自己想要的效果
- Table 表格， 可以添加ppt表格，但是表格內(nèi)只能放文字和數(shù)字
- Charts 圖表 圖表，可以支持常見的餅狀圖、柱狀圖、折線圖等，配置項也挺全的，橫縱坐標(biāo)，legend等啥都有，基本可以滿足常用。
3.使用
js代碼
exportPPT() {
// 1. 創(chuàng)建PPT
const pres = new Pptxgen()
// 2. 創(chuàng)建一個PPT頁面，每調(diào)用一次 pres.addSlide() 都可以生成一張新的頁面
// 建議把每個頁面的構(gòu)造抽成一個個函數(shù)，然后通過函數(shù)調(diào)用生成新頁面，代碼不會很亂
const slide = pres.addSlide()
// 3. 調(diào)用addTetx()，在PPT頁面中插入文字“Hello World from PptxGenJS...”
// 括號里面是對文字的配置，文字橫坐標(biāo)x為1.5，縱坐標(biāo)y為1.5，字體顏色 363636……
// 關(guān)于坐標(biāo)長度與px的轉(zhuǎn)換 x 1 = 127~128px 左右
slide.addText('需求進度', {
x: 0.2, // 橫坐標(biāo)
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(['序號', '需求標(biāo)題', '預(yù)計發(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, // 單元格默認(rèn)高度
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. 調(diào)用addTetx()，在PPT頁面中插入文字“Hello World from PptxGenJS...”
// 括號里面是對文字的配置，文字橫坐標(biāo)x為1.5，縱坐標(biāo)y為1.5，字體顏色 363636……
// 關(guān)于坐標(biāo)長度與px的轉(zhuǎn)換 x 1 = 127~128px 左右
slide2.addText('Amazon平臺', {
x: 0.4, // 橫坐標(biāo)
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, // 橫坐標(biāo)
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平臺' // 標(biāo)題
}
)
const tempResult3 = '英國上漲5%，德國上漲10%，法國上漲12%，意大利上漲6%，西班牙上漲10%，XXXXX'
slide2.addText(tempResult3, {
x: 0.5, // 橫坐標(biāo)
y: 5.2,
color: '363636',
fontSize: 18, // 字號
fill: { color: 'F1F1F1' },
align: 'center'
})
const slide3 = pres.addSlide()
// 3. 調(diào)用addTetx()，在PPT頁面中插入文字“Hello World from PptxGenJS...”
// 括號里面是對文字的配置，文字橫坐標(biāo)x為1.5，縱坐標(biāo)y為1.5，字體顏色 363636……
// 關(guān)于坐標(biāo)長度與px的轉(zhuǎn)換 x 1 = 127~128px 左右
slide3.addText('SMT平臺', {
x: 0.5, // 橫坐標(biāo)
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, // 單元格默認(rèn)高度
color: '363636'
}
)
slide3.addText('總計', {
x: 0.6, // 橫坐標(biāo)
y: 4.5,
color: '363636',
fontSize: 12, // 字號
fill: { color: 'F1F1F1' },
align: 'left'
})
slide3.addText('其它', {
x: 0.6, // 橫坐標(biāo)
y: 4.9,
color: '363636',
fontSize: 12, // 字號
fill: { color: 'F1F1F1' },
align: 'left'
})
pres.author = '作者_(dá)abin'
pres.company = '公司'
// 4. 生成PPT， 括號中的fileName，就是生成的 PPT名字，可以使用 .then 或者 .catch處理對應(yīng)事件。
pres.writeFile({ fileName: '20231124周報6.2.pptx' }).then(() => {
this.$Message.success('導(dǎo)出成功')
})
},總結(jié)
到此這篇關(guān)于前端vue如何使用pptxgen.js導(dǎo)出PPT的文章就介紹到這了,更多相關(guān)前端vue導(dǎo)出PPT內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue+webpack 更換主題N種方案優(yōu)劣分析，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
Vue中使用v-print打印出現(xiàn)空白頁問題及解決
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了從零開始在NPM上發(fā)布一個Vue組件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function
這篇文章主要給大家介紹了關(guān)于React/vue開發(fā)報錯TypeError:this.getOptions?is?not?a?function的解決方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vuex頁面刷新數(shù)據(jù)丟失問題的四種解決方式
vuex是大家使用vue時大多數(shù)都會選擇的,但是當(dāng)頁面刷新之后vuex數(shù)據(jù)會丟失,下面這篇文章主要給大家介紹了關(guān)于vuex頁面刷新數(shù)據(jù)丟失問題的四種解決方式,需要的朋友可以參考下2022-02-02
vue的人都知道,vue3里面使用了proxy替換了defineProperty,本文主要介紹了Vue3用Proxy替代defineProperty的原因,具有一定的參考價值,感興趣的可以了解一下2023-12-12
Vue實現(xiàn)實時更新sessionStorage數(shù)據(jù)的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何實現(xiàn)實時更新sessionStorage數(shù)據(jù)，文中的示例代碼講解詳細(xì)，具有一定的參考價值，需要的可以參考一下2023-06-06
下面小編就為大家?guī)硪黄獀ue系列之動態(tài)路由詳解【原創(chuàng)】。小編覺得挺不錯的，現(xiàn)在就想給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Vue中的scoped和 elememt-plus的樣式修改方法
Vue中的scoped屬性用于實現(xiàn)樣式隔離,確保組件間的樣式互不影響,通過在組件的style標(biāo)簽內(nèi)添加任何內(nèi)容,可以為組件生成一個唯一的哈希值,從而實現(xiàn)樣式的定位,本文通過實例代碼講解Vue中的scoped和 elememt-plus的樣式修改方法,感興趣的朋友一起看看吧2025-01-01
Vue中使用fetch讀取本地txt文件的技術(shù)實現(xiàn)
在Vue.js應(yīng)用開發(fā)中,有時我們需要從本地讀取文本文件（如 .txt 文件）并將其內(nèi)容展示在頁面上,這種需求在處理配置文件、日志文件或靜態(tài)數(shù)據(jù)時非常常見,本文將詳細(xì)介紹如何在Vue中使用 fetch API 讀取本地 .txt 文件,并提供多個示例和使用技巧2024-10-10