推荐一个免费功能强大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，转成统一的文件格式，再由前端实现预览效果

您的项目需求