推薦一個免費功能強大JS前端生成幻燈片庫PptxGe

推薦一個免費功能強大JS前端生成幻燈片庫PptxGenJS

得在5年前，當時我還在上個東家負責實施項目管理系統的時候，當時的方案是項目計劃管理子系統主要用Project Server實現，這個主要由供應商幫我們負責實施落地，但其他子系統均在Sharepoint上進行內部自行開發實施，其中我負責自研實施的項目風險管理子系統，業務有一個需求就是針對每個風險不僅能夠方便網頁展示，另外需要一個導出項目風險一頁紙的PPT的功能，所以我當時就想，當時前端已很強大了（另外一個項目風險Excel導入功能，我就是找了一個免費Javascript Excel庫完成的），那有沒有前端生成PPT的免費JS庫呢？經過一番查找和研究測試，我發現了一個免費功能強大的Javascript生成PowerPoint庫：PptxGenJS，并按業務需求最終完成了導出項目風險一頁紙的PPT功能。2021年12月13日發布了PptxGenJS最新版本V3.9.0，它的官網地址：http://gitbrent.github.io/PptxGenJS/，在線Demo地址：http://gitbrent.github.io/PptxGenJS/demos/

demo

它的github源代碼倉庫：https://github.com/gitbrent/PptxGenJS。PptxGenJS創建與Microsoft PowerPoint、Apple Keynote和其他應用程序兼容的Open Office XML(OOXML) 演示文稿。它的功能特性如下：

一、Works Everywhere

1.支持所有現代桌面和移動瀏覽器

2.與Node、Angular、React和 Electron集成

3.與PowerPoint、Keynote等兼容

二、Full Featured

1.所有主要對象類型均可用（圖表、形狀、表格等）

2.用于學術/企業品牌的主幻燈片

3.SVG圖像、GIF動畫、YouTube視頻、RTL文本和亞洲字體

三、Simple And Powerful

1.絕對最容易使用的PowerPoint庫

2.在編寫代碼時學習將包括完整的typescript定義

3.包含大量演示代碼（超過75張功能幻燈片）

四、Export Your Way

1.將文件直接導出到具有正確MIME類型的客戶端瀏覽器

2.其他可用的導出格式：base64、blob、流等。

3.演示壓縮選項等

五、HTML To PowerPoint

1.PowerPoint功能，只需一行代碼即可將HTML表格轉換為演示文稿

安裝：

1、打包: Modern Browsers and IE 11

<script  src=" pptxGenJS/dist/pptxgen.bundle.js " > </script >

2、最小：Modern Browsers

<script  src=" PptxGenJS/libs/jszip.min.js " > </script > 
<script  src=" PptxGenJS/dist/pptxgen.min.js " > </script >

簡單實例：

1、HTML轉PowerPoint

let pptx=new PptxGenJS();
pptx.tableToSlides("tableElementId");
pptx.writeFile({ fileName: "html2pptx-demo.pptx" });

2、創建一個PowerPoint

let pres=new PptxGenJS();

3、創建并保存多個PowerPoint

let pptx=null;

// Presentation 1:
pptx=new PptxGenJS();
pptx.addSlide().addText("Presentation 1", { x: 1, y: 1 });
pptx.writeFile({ fileName: "PptxGenJS-Presentation-1" });

// Presentation 2:
pptx=new PptxGenJS();
pptx.addSlide().addText("Presentation 2", { x: 1, y: 1 });
pptx.writeFile({ fileName: "PptxGenJS-Presentation-2" });

4、添加多媒體到PowerPoint

// Path: full or relative
slide.addMedia({ type: "video", path: "https://example.com/media/sample.mov" });
slide.addMedia({ type: "video", path: "../media/sample.mov" });

// Base64: pre-encoded string
slide.addMedia({ type: "audio", data: "audio/mp3;base64,iVtDafDrBF[...]=" });

// YouTube: Online video (supported in Microsoft 365)
slide.addMedia({ type: "online", link: "https://www.youtube.com/embed/Dph6ynRVyUc" });

其他功能就不一一介紹了，有興趣的話，您可以自行研究或也歡迎聯系我進行交流。

如果您喜歡這篇文章，請關注我，收藏、點贊、評論和轉發，會讓更多需要幫助的人看到這篇文章。舉手之勞，善莫大焉！

說明

=====

1.1 重點介紹python-pptx的基本用法，注意事項，批量方法（★）。

1.2 講解清楚，注釋仔細，本人親測，注意事項提醒，適合收藏，小白秒懂。

2 python-pptx基本使用

==================

2.1 官網

https://github.com/scanny/python-pptx
https://python-pptx.readthedocs.io/en/latest/index.html

2.2 安裝

pip install python-pptx

#本機安裝，國內源
sudo pip3.8 install -i https://pypi.tuna.tsinghua.edu.cn/simple python-pptx

2.3 首頁文字

2.3.1 代碼

#ppt首頁文字設置
# 導包
from pptx import Presentation

# 創建空白演示文稿
prs=Presentation()

# 添加標題布局的幻燈片
# #第0種布局是空白布局
# #ppt布局，0是主標題和副標題，也就是首頁
#0~6等
title_slide_layout=prs.slide_layouts[0]
#添加空白幻燈片
slide=prs.slides.add_slide(title_slide_layout)
# 設置標題和副標題
#title=slide.shapes.title
#等同于上面的設置
title=slide.placeholders[0]
#注意只能是1，不能是0，是0就等同于主標題

subtitle=slide.placeholders[1]
#文字內容
title.text="Hello, World!"
subtitle.text="python-pptx was here!"
# 保存
prs.save('/home/xgj/Desktop/python-pptx/1.pptx')

2.3.1 圖

2.4 柱狀圖

2.4.1 代碼

from pptx import Presentation
from pptx.chart.data import ChartData
from pptx.enum.chart import XL_CHART_TYPE
#導出英尺，還可以到處Cm
#from pptx.util import Inches
from pptx.util import Cm
# 創建幻燈片 ------
prs=Presentation()
#推薦圖標布局5
slide=prs.slides.add_slide(prs.slide_layouts[5])
 
# 定義圖表數據 ---------------------
chart_data=ChartData()
chart_data.categories=['Dog', 'Pig', 'Cow']
#數組和數據
chart_data.add_series('Series 1', (29, 20, 33))
chart_data.add_series('Series 2', (14, 31.4, 19.7))
# 將圖表添加到幻燈片 --------------------
#x和y是圖片的坐標，左頂點坐標為0,0
#cx和cy是圖片的右下坐標，推薦參數數值
#x, y, cx, cy=Inches(2), Inches(2), Inches(6), Inches(4.5)
#Cm厘米設置大小，推薦參數數值
x, y, cx, cy=Cm(4), Cm(4), Cm(16), Cm(12)

slide.shapes.add_chart(
    XL_CHART_TYPE.COLUMN_CLUSTERED, x, y, cx, cy, chart_data
)

#圖表的標題
title=slide.shapes.title
title.text="2組動物數據柱狀圖"

prs.save('/home/xgj/Desktop/python-pptx/2-chart.pptx')

2.4.2 圖

2.5 圖片加載

代碼，圖省略


from pptx import Presentation
from pptx.util import Cm

prs=Presentation()
#布局6，圖片格式
blank_slide_layout=prs.slide_layouts[6]
#加入ppt
slide=prs.slides.add_slide(blank_slide_layout)

#類似與x和y，代表圖片的左上角的坐標位置
left=top=Cm(3)
#如果不設置寬和高，就是原圖大小顯示，一般都是尺寸不合適
height=Cm(12)
width=Cm(10)  

pic=slide.shapes.add_picture('/home/xgj/Desktop/python-pptx/girl.jpeg',left,top,height=height,width=width)
#原圖
#pic=slide.shapes.add_picture('/home/xgj/Desktop/python-pptx/girl.jpeg',left,top)

prs.save('/home/xgj/Desktop/python-pptx/3-pic.pptx')

2.6 表格

2.6.1 代碼

from pptx import Presentation
from pptx.util import Cm

prs=Presentation()
 #使用第6個空白版式創建新的幻燈片
blank_slide_layout=prs.slide_layouts[6]
slide=prs.slides.add_slide(blank_slide_layout)

#表格設置4行2列
rows,cols=4,2
#圖表的左上角坐標
left=top=Cm(5)
#圖表的寬和高
width=Cm(18)
height=Cm(3)
#表格參數導入
table=slide.shapes.add_table(rows,cols,left,top,width,height).table
# 可以修改列寬、行高
table.columns[0].width=Cm(6)
table.columns[1].width=Cm(4)
table.rows[0].height=Cm(2)
#數據
data=[
    ['姓名','成績'], #第一行，表頭設置
    ['李白',99],
    ['王維', 92],
    ['杜牧', 95],
]

#遍歷
for row in range(rows):
    for col in range(cols):
        table.cell(row,col).text=str(data[row][col])

prs.save('/home/xgj/Desktop/python-pptx/4-table.pptx')

2.6.2 圖

3 python-pptx高級使用

=================

3.1 組合圖

3.1.1 代碼

from pptx import Presentation
from pptx.chart.data import ChartData
from pptx.enum.chart import XL_CHART_TYPE
from pptx.util import Cm #Inches
from pptx.enum.chart import XL_LEGEND_POSITION

# 創建幻燈片 ------
prs=Presentation()
title_only_slide_layout=prs.slide_layouts[5]
slide=prs.slides.add_slide(title_only_slide_layout)
shapes=slide.shapes
shapes.title.text='報告'

# 定義表格數據 ------
name_objects=["object1", "object2", "object3"]
name_AIs=["AI1", "AI2", "AI3"]
val_AI1=(19.2, 21.4, 16.7)
val_AI2=(22.3, 28.6, 15.2)
val_AI3=(20.4, 26.3, 14.2)
val_AIs=[val_AI1, val_AI2, val_AI3]

# 表格參數設置
rows=4
cols=4
top=Cm(12.5)
left=Cm(2.5) #Inches(2.0)
width=Cm(16) # 4個寬度的4
height=Cm(5) # Inches(0.8)

# 添加表格到幻燈片 --------------------
table=shapes.add_table(rows, cols, left, top, width, height).table

# 設置單元格寬度，寬度與總表格寬度的關系
table.columns[0].width=Cm(4)
table.columns[1].width=Cm(4)
table.columns[2].width=Cm(4)
table.columns[3].width=Cm(4)

# 設置標題行
table.cell(0, 1).text=name_objects[0]
table.cell(0, 2).text=name_objects[1]
table.cell(0, 3).text=name_objects[2]

# 填充數據
table.cell(1, 0).text=name_AIs[0]
table.cell(1, 1).text=str(val_AI1[0])
table.cell(1, 2).text=str(val_AI1[1])
table.cell(1, 3).text=str(val_AI1[2])

table.cell(2, 0).text=name_AIs[1]
table.cell(2, 1).text=str(val_AI2[0])
table.cell(2, 2).text=str(val_AI2[1])
table.cell(2, 3).text=str(val_AI2[2])

table.cell(3, 0).text=name_AIs[2]
table.cell(3, 1).text=str(val_AI3[0])
table.cell(3, 2).text=str(val_AI3[1])
table.cell(3, 3).text=str(val_AI3[2])

# 定義圖表數據 ---------------------
chart_data=ChartData()
chart_data.categories=name_objects
chart_data.add_series(name_AIs[0], val_AI1)
chart_data.add_series(name_AIs[1], val_AI2)
chart_data.add_series(name_AIs[2], val_AI3)

# 添加圖表到幻燈片 --------------------
#柱狀圖參數設置
x, y, cx, cy=Cm(2.5), Cm(4.2), Cm(20), Cm(6)

graphic_frame=slide.shapes.add_chart(
    XL_CHART_TYPE.COLUMN_CLUSTERED, x, y, cx, cy, chart_data
    )

chart=graphic_frame.chart

chart.has_legend=True
chart.legend.position=XL_LEGEND_POSITION.TOP
chart.legend.include_in_layout=False

value_axis=chart.value_axis
value_axis.maximum_scale=100.0

value_axis.has_title=True
value_axis.axis_title.has_text_frame=True
value_axis.axis_title.text_frame.text="False positive"
value_axis.axis_title.text_frame.auto_size

prs.save('/home/xgj/Desktop/python-pptx/5-chart-complex.pptx')

3.1.2 圖

3.2 批量生成ppt：python出來ppt的優點，舉例★

（誰用單個頁面制作ppt，不是python的優勢，批量制作才是python的優勢）

3.2.1 代碼

#批量制作ppt文件，這個比較好
from pptx import Presentation
from pptx.util import Cm
import os
# 演示文稿根對象，使用默認母版
prs=Presentation()
# 幻燈片布局
title_only_slide_layout=prs.slide_layouts[5]

#名字列表，當然也可以來自文件，txt或者xls和csv等讀取提取
name_list=['A','B','C','D','E','F']

#讀取某路徑下的所有圖片和顯示圖片
pic_dir=os.path.join("/home/xgj/Desktop/python-pptx/pic_img")
#這個 文件列表安裝圖片大小排序的
pic_img_names=os.listdir(pic_dir)

#從新排序，按名字序號阿拉伯數字的升序
pic_img_names.sort()

for i in range(len(name_list)):
    # 1. 當前幻燈片對象
    slide=prs.slides.add_slide(title_only_slide_layout)
    # 2. 當前shapes（背景畫布）對象
    shapes=slide.shapes
    #標題文字
    shapes.title.text='祝'+str(name_list[i]+'同學，新年快樂！')
    #圖片位置和大小設置
    #類似與x和y，代表圖片的左上角的坐標位置
    left=top=Cm(3)
    #如果不設置寬和高，就是原圖大小顯示，一般都是尺寸不合適
    height=Cm(12)
    width=Cm(10)  
    #加載圖片到ppt每一頁去
    pic=slide.shapes.add_picture(pic_dir +"/" + pic_img_names[i],left,top,height=height,width=width)

#保存
prs.save('/home/xgj/Desktop/python-pptx/2pil.pptx')

3.2.2 圖

圖片來自網絡，僅供學習，如有侵權請聯系，定刪除。

于實現文檔在線預覽的做法，之前文章提到了的兩種實現方式：

1、通過將文檔轉成圖片：詳見《文檔在線預覽（一）通過將txt、word、pdf轉成圖片實現在線預覽功能》；

2、將文檔轉成html：詳見《文檔在線預覽（二）word、pdf文件轉html以實現文檔在線預覽》；

其實除了這兩種實現方式之外之外，還有一種常見的做法就是在前端在通過相關的在線預覽組件來實現預覽

實現方案

在網上的找了一圈實現方案，發現還挺多開源組件可以實現，整理了一下這些開源組件放在了下面的表格里，里面有一些是可以直接通過npm在vue中引入使用。

文檔格式	相關的開源組件
word(docx)	docx-preview、mammoth
pdf	pdf.js、pdfobject.js、vue-pdf
excel	sheetjs js-xlsx、canvas-datagrid、handsontable、DataTables
powerpoint（pptx）	pptxjs

一、docx文件實現前端預覽

1、docx-preview

是一個純前端的JavaScript庫，它的優點是可以后端就實現對 .docx 的文件進行在線預覽，但是缺點是 不支持.doc(劃重點)。

github地址：https://github.com/VolodymyrBaydalka/docxjs

demo示例

安裝：

npm install docx-preview -S

使用效果：

2、Mammoth

??Mammoth 原理是將 .docx 文檔并將其轉換為 HTML。注意Mammoth 轉換過程中復雜樣式被忽，居中、首行縮進等，此外同樣也只能轉換.docx文檔。

github地址：https://github.com/mwilliamson/mammoth.js

安裝：

npm install mammoth

二、PDF文件實現前端預覽

1、pdf.js

pdf.js是一款非常優秀的pdf解析工具，其實火狐瀏覽器內核自帶pdf預覽解析器就是pdf.js這個解析器，我們用火狐瀏覽器打開pdf文件并按F12打開控制臺可以看到源碼內容。

官網地址：http://mozilla.github.io/pdf.js

github地址：https://github.com/mozilla/pdf.js

demo示例

使用效果：

2、pdfobject.js

PDFObject.js - 將PDF嵌入到一個div內，而不是占據整個頁面，要求瀏覽器支持顯示PDF（主流瀏覽器都支持），如果瀏覽器不支持，也可通過配置PDF.js來實現

官網地址: https://pdfobject.com/

github地址：https://github.com/pipwerks/PDFObject

實現效果：

3、vue-pdf

Vue-pdf是通過Vue下基礎基于 pdf.js 組件實現PDF文件的展示，操作和生成的組件。

github地址：https://github.com/FranckFreiburger/vue-pdf

demo示例

安裝：

npm install --save vue-pdf

實現效果：

4、iframe / object/ embed

iframe / object / embed 使用方法和效果都同理，即將 pdf 作為插件內嵌在這三個HTML標簽內，以下用 iframe 為例，效果就如同直接用鏈接打開 pdf 文件是一樣的，相當于一個新的頁面內嵌在當前頁面中。

<iframe style="width: 100%; height: 100%;" src="/static/xxx.pdf"></iframe>

實現效果：

三、Excel文件實現前端預覽

1、sheetjs js-xlsx

js-xlsx是sheetJS出品的讀取和導出各種ecxel的工具庫，功能十分強大。

xlsx官方文檔：https://www.npmjs.com/package/xlsx

github倉庫： https://github.com/SheetJS/sheetjs

安裝：

npm install xlsx

js-xlsx可以用二進制流方式讀取得到整份excel表格對象

let workbook=XLSX.read(data, { type: "array" });   //表格對象
let sheetNames=workbook.SheetNames;  //獲取到所有表格
let worksheet=workbook.Sheets[sheetNames[0]];  //取第一張表

獲取表格數據后再調用js-xlsx提供的方法，直接將表格數據轉換為html代碼，再將html代碼渲染到指定容器就完成了

let html=XLSX.utils.sheet_to_html(worksheet);

實現效果：

2、canvas-datagrid

? 基于 canvas 來渲染表格，支持表格過濾、數據編輯、自定義操作菜單、大數據場景優化、主題樣式修改

github地址：https://github.com/TonyGermaneri/canvas-datagrid

demo示例

安裝：

npm install canvas-datagrid

3、 handsontable

handsontable基于 DOM 元素來渲染表格，功能強大，canvas-datagrid` 支持的功能它都支持，并且主題樣式擴展更方便

官網地址：https://handsontable.com/docs/7.1.0/tutorial-custom-build.html

github地址：https://github.com/handsontable/handsontable

文檔地址：https://handsontable.com/docs/javascript-data-grid

安裝：

npm install handsontable @handsontable/vue

Demo示例

實現效果：

4、DataTables

基于Jquery 表格插件DataTables的一個表格插件，還在用Jquery 可以以考慮這個

官網地址：https://www.datatables.net

安裝：

官網下載地址，在你的項目中使用 DataTables，只需要引入三個個文件即可，jQuery庫，一個DataTables的核心js文件和一個DataTables的css文件。有的時候還需要DataTables樣式的一些資源。

<link href="DataTables/datatables.min.css" rel="stylesheet"/>
<script src="DataTables/datatables.min.js"></script>

使用方式：

$('#example').DataTable( {
    data: data
} );

四、pptx文件實現前端預覽

### 1、PPTXJS PPTXJS是jquery的一個插件，她的主要功能是實現pptx轉html，用于在線進行展示

官網地址：https://pptx.js.org/index.html

github地址：https://github.com/meshesha/PPTXjs

PPTXjs | Demos

使用示例：

<div id="slide-resolte-contaniner" ></div> 
<script> 
  $("#slide-resolte-contaniner").pptxToHtml({ 
    pptxFileUrl: "Sample_demo1.pptx", 
    slidesScale: "50%", 
    slideMode: false, 
    keyBoardShortCut: false 
  }); 
</script>

實現效果：

總結

本文主要介紹了word、excel、pdf、ppt等文件純前端實現在線預覽的方式，具體實現可以是：

### 1、前端根據不同文件類型使用對應的在線預覽組件進行在線預覽。前端通過判斷不同文件類型的使用對應的在線預覽組件進行在線預覽。因為不同類型的在線預覽組件不一樣在使用時預覽界面會存在差異，如果需要做的完善一點最好是把所有用到的組件都統一封裝的一個在線預覽的UI界面中。

2、后端配合將不同格式的文件轉換成pdf，轉成統一的文件格式，再由前端實現預覽效果

從本文的測試情況來看前端實現預覽最好的效果還是PDF，不會出現一些文字錯亂和亂碼的問題，這樣能保留文件的一些樣式的效果，同時前端也只用支持一種文件格式的預覽，工作量也能大大降低。

以上就是使用js前端實現word、excel、pdf、ppt等文件在線預覽的方式的全部內容，感謝大家的閱讀！

在線咨詢

上一篇：HTML5為什么這么火？這兩點幫你深刻認識HTML5
下一篇：Three.js貼圖效果一覽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

推薦一個免費功能強大JS前端生成幻燈片庫PptxGe

實現方案

一、docx文件實現前端預覽

1、docx-preview

2、Mammoth

二、PDF文件實現前端預覽

1、pdf.js

2、pdfobject.js

3、vue-pdf

4、iframe / object/ embed

三、Excel文件實現前端預覽

1、sheetjs js-xlsx

2、canvas-datagrid

3、 handsontable

4、DataTables

四、pptx文件實現前端預覽

總結

2、后端配合將不同格式的文件轉換成pdf，轉成統一的文件格式，再由前端實現預覽效果

您的項目需求