前端使用ppexgen.js导出ppt文件
站长
· 阅读数 49
ppexgen.js是前端用来导出ppt的js库，它还支持typeScript.具体可以查看官网
ppexgen.js的使用
ppexgen.js可以导出以下内容：
- 文字
- table表格
- Image图片
- Charts图表
- shape形状
- media媒体
像其他js库一样，首先需要安装，按照下面的安装命令即可安装
npm install pptxgenjs --save
然后在需要使用的组件或页面中中引入即可
import pptxgen from "pptxgenjs";
上面的准备工作完成了之后。它的具体使用一共分为四个步骤：
1. 创建对象
首先需要创建一个ppt对象，后面的操作都是基于这个对象来操作的。
let pres = new pptxgen();
2. 新建幻灯片
新建幻灯片是使用addSlide()来创建的，每一张幻灯片都需要根据这个方法来生成。
let slide = pres.addSlide();
3. 给幻灯片添加内容
给幻灯片添加内容，一共可以添加文字，表格，图片，图表，形状，媒体等等
slide.addText("Hello World from PptxGenJS...", {
x: 1.5,
y: 1.5,
color: "363636",
fill: { color: "F1F1F1" },
align: pres.AlignH.center,
});
4. 导出ppt文件
在创建好了所有的幻灯片内容之后，就可以使用writeFile方法导出ppt文件了。其中fileName可以配置导出的文件名。
pres.writeFile({ fileName: "test.pptx" });
1.1 创建文本内容
语法如下：
slide.addText([{ text: "TEXT", options: { OPTIONS } }]);
其中数组表格可以配置多个文本对象，每一个文本对象有两个属性
- text: 表示文本内容
- options: 表示配置对象，比如可以配置位置，字体样式，文字大小，阴影，背景等等
let pres = new pptxgen();
let slide = pres.addSlide();
const text = "欢迎来到元子不圆的前端世界"
// 文本配置
const options = {
x: 0.5, //横坐标
y: "10%", //纵坐标
w: "90%", //宽度
h: 1.5, //高度
margin: 10, //类似html的padding
fontFace: "Arial", //字体
fontSize: 32, //字号
color: "00CC00", //颜色 与背景颜色一样，一样不要 #，填满6位
bold: true, //是否加粗
align: 'center', //左右居中 可选值 left align right
valign: 'middle', // 垂直居中 top middle bottom
underline: true, //下划线
isTextBox: true, //是否文字盒子
}
slide.addText(text, options);
pres.writeFile({ fileName: "test.pptx" });
效果如下：
其中配置选项中的x, y, w, h分别对应的是x坐标，y坐标，宽度，高度。这四个属性既可以是数值，也可以是百分数字符串，如果是数值表示1 = 128px，百分数而是相对于幻灯片的宽高来计算的。
1.2 创建图片内容
语法如下：
slide.addImage({ path: "https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg" });
也支持两个属性：
- path或者data： path是图片的路径，既可以是远程路径也可以是本地路径。data就是二进制图片
- options：里面包含很多图片配置，包括图片位置，大小，是否圆角，旋转变换，默认文字，图片自适应方式等等
const base64 = (dom) => {
const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')
canvas.width = dom.width
canvas.height = dom.height
ctx?.drawImage(dom, 0, 0, dom.width, dom.height)
return canvas.toDataURL('image/png')
}
const genePPT = () => {
let pres = new pptxgen();
let slide = pres.addSlide();
const text = "欢迎来到元子不圆的前端世界"
// 文本配置
const options = {
x: 0.5, //横坐标
y: '10%', //纵坐标
w: "90%", //宽度
h: 1.5, //高度
margin: 10, //类似html的padding
fontFace: "Arial", //字体
fontSize: 32, //字号
color: "00CC00", //颜色 与背景颜色一样，一样不要 #，填满6位
bold: true, //是否加粗
align: 'center', //左右居中 可选值 left align right
valign: 'middle', // 垂直居中 top middle bottom
underline: true, //下划线
isTextBox: true, //是否文字盒子
}
slide.addText(text, options);
// 图片
slide.addImage({
x: 1,
y: '30%',
w: 2,
h: 2,
sizing: { type: 'contain' }, // 图片尺寸
data: base64(document.getElementById('imgId'))
})
pres.writeFile({ fileName: "test.pptx" });
}
效果如下：
需要注意的是，我们一定要注意图片自适应的属性，其中有有以下几种属性值
- contain: 会根据我们设置的w,h属性的宽高比来进行自适应的
- cover: 图片铺满，会被拉伸
- crop: 图片不按比例缩放，而是剪切，xywh 是剪切区域
如何设置contain时，w,h一定要按照图片本身的宽高比例来设置，否则会变形的。而且w,h不能设置太大，也就是不能超出幻灯片的画布，否则会出现下面这种情况
1.3 创建图表内容
幻灯片可以添加很多图表，比如常见的折线图，柱状图，饼图，散点图等等。 语法如下：
slide.addChart(pres.ChartType.line, dataChartAreaLine, { x: 1, y: 1, w: 8, h: 4 });
其中第一个参数表示图表的类型，一共有以下几种属性：
- pptx.ChartType.area：面积图
- pptx.ChartType.bar：柱状图
- pptx.ChartType.bar3d：3d柱状图
- pptx.ChartType.bubble：气泡图
- pptx.ChartType.doughnut：扇形图
- pptx.ChartType.line：折线图
- pptx.ChartType.pie：饼状图
- pptx.ChartType.radar：雷达图
- pptx.ChartType.scatter：散点图
第二个属性表示图标的配置项 第三个属性表示图标的位置，长宽高配置项
// 创建第二张ppt
let slide2 = pres.addSlide();
//颜色不需要 #
const colorList = ['FF6767', '8394FF', 'FF8260', 'FF5DA6', '6D46DB', '00BEFF']
// 图表数据，name 名称，labels 横坐标值，values 数据值
const dataChartAreaLine = [
{
name: "Actual Sales",
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
values: [1500, 4600, 5156, 3167, 8510, 8009, 6006, 7855, 12102, 12789, 10123, 15121],
},
{
name: "Projected Sales",
labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
values: [1000, 2600, 3456, 4567, 5010, 6009, 7006, 8855, 9102, 10789, 11123, 12121],
},
];
const opts = {
barDir: 'col',
dataBorder: { pt: '0.2', color: 'eeeeee' }, // 柱状图柱子边框线
catAxisLabelColor: 'b5b5b5', // 横轴刻度字体颜色
valAxisLabelColor: 'b5b5b5', // 纵轴刻度字体颜色
catAxisLabelFontSize: 8, // 横轴刻度字体大小
valAxisLabelFontSize: 8, // 纵轴刻度字体大小
showLegend: true, // 展示legend 就是一个小颜色块，戳一下可以控制对应数据的显示隐藏的那个东西
legendColor: 'b5b5b5', // legend颜色
legendFontSize: 8, // legend字体
legendPos: 'b', // legend位置 b 是底部，t 是顶部
showTitle: true, // 展示标题
titleColor: 'b5b5b5', // 标题颜色
titlePos: { x: 10, y: 10 }, // 标题位置
titleAlign: 'right', // 标题左右居中
titleFontSize: 8, // 标题字体
valGridLine: { pt: '0.2', color: 'eeeeee' }, // y轴网格刻度线
title: '全网阅读量', // 标题
chartColors: colorList, // 柱状图颜色列表
barGapWidthPct: 500 / dataChartAreaLine .length, // 柱状图宽度，最大500，这里除一下数组宽度,不然可能会矮矮胖胖
showValue: true, // 是否展示数值
dataLabelColor: 'b5b5b5', // 数值字体颜色
dataLabelFontFace: 'Microsoft YaHei', // 数值字体
dataLabelFontSize: 8, // 数值字体大小
dataLabelPosition: 'outEnd', // 数值出现位置
};
slide2.addChart(pres.ChartType.bar, dataChartAreaLine, opts);
效果如下：
1.4 创建表格内容
语法如下：
slide.addTable(arrTabRows, { x: 0.5, y: 3.5, w: 9, h: 1, colW: [1.5, 1.5, 6] });
一共有两个参数： 第一个参数是表格数组，里面包含表头和表格数据及配置 第二个参数是表格配置，里面包括位置，样式等相关配置
// 新建一张ppt
let slide3 = pres.addSlide();
const row = [];
// 表格边框
const border = [ // 表格边框
{ pt: 0.5, color: 'eeeeee' },
{ type: 'none' },
{ pt: 0.5, color: 'eeeeee' },
{ type: 'none' }
]
// 单元格样式配置
const options3 = { valign: 'middle', border: border };
row.push([ // 表头
{ text: '姓名', options: { ...options3, fill: 'eeeeee' }},
{ text: '性别', options: { ...options3, fill: 'eeeeee' }},
{ text: '年龄', options: { ...options3, fill: 'eeeeee' }},
{ text: '手机号', options: { ...options3, fill: 'eeeeee' }}
])
row.push([ // 表格数据
{ text: '元子不圆呀', options3 },
{ text: '女', options3 },
{ text: '18', options3 },
{ text: '13234567891', options3 }
]);
slide3.addTable(row, { // 表格默认配置
x: '5%',
y: 1,
w: '43%',
rowH: 0.31, // 单元格默认高度
valign: 'middle',
fontSize: 8,
color: '666666',
align: 'center',
colW: [0.75, 2.0, 0.85, 0.8] // 表格每一列宽度
})
效果如下：
1.5 创建形状内容
语法如下
slide.addShape(pres.ShapeType.rect, { fill: { color: "FF0000" } });
其中第一个参数表示形状类型，有以下几种属性值：
- pres.ShapeType.rect：矩形
- pres.ShapeType.ellipse：椭圆
- pres.ShapeType.line：线条
// 新建一张ppt
let slide4 = pres.addSlide();
// 不带文本的形状
slide4.addShape(pres.ShapeType.rect, {
x: 1,
y: 1,
fill: { color: "FF0000" }
});
slide4.addShape(pres.ShapeType.ellipse, {
x: 2,
y: 2,
fill: { type: "solid", color: "0088CC" },
});
slide4.addShape(pres.ShapeType.line, {
x: 3,
y: 3,
line: { color: "FF0000", width: 1 }
});
// 带文本的形状
slide4.addText("ShapeType.rect", {
shape: pres.ShapeType.rect,
x: 1,
y: 4,
fill: { color: "FF0000" },
});
slide4.addText("ShapeType.ellipse", {
x: 1,
y: 5,
shape: pres.ShapeType.ellipse,
fill: { color: "FF0000" },
});
slide4.addText("ShapeType.line", {
x: 1,
y: 6,
shape: pres.ShapeType.line,
line: { color: "FF0000", width: 1, dashType: "lgDash" },
});
效果如下：
1.6 创建媒体内容
媒体内容包括音频和视频内容，语法如下：
slide.addMedia({ type: "video", path: "https://example.com/media/sample.mov" });
slide.addMedia({ type: "video", path: "../media/sample.mov" });
slide.addMedia({ type: "audio", data: "audio/mp3;base64,iVtDafDrBF[...]=" });
slide.addMedia({ type: "online", link: "https://www.youtube.com/embed/Dph6ynRVyUc" });
其中参数如下：
- type: 可以为video或者audio，也就是视频和音频
- path或者data或者link： path表示文件所在位置的地址路径，可以是绝对路径也可以是相对路径，data表示base64数据，link表示视频网站的链接。
let slide5 = pres.addSlide();
slide5.addMedia({ type: "online", link: "https://www.bilibili.com/video/BV1Fj41137bL/?spm_id_from=333.1073.high_energy.content.click&vd_source=b9919d43e48287326488230478a4a1f9" });
小结
- 上述介绍了几种类型的创建，至于具体配置没有用过多的篇幅进行介绍，可以参考官方文档。
- 在实际项目中，我们一定要确定导出ppt的样式，然后根据样式调一下具体位置大小，最后在导出ppt文件的时候一定要先检查一下ppt文件内容是否正常。
- 在实际开发中可能会存在某种样式的某块多次显示或者次数不限的情况，我们最好是根据具体通用的块进行封装然后根据实际数据遍历加载。