使用js将网页转换为ppt并下载

在开发过程中，难免遇到将网页转换为ppt并下载下来演示的需求。尤其是在一些报告类型的网站，数据后台网站中，这类需求会更多。

为了实现这个功能，我们需要两个js库来帮忙，一个是PptxGenJS，另外一个是html2canvas

js生成ppt

  • 直接使用js生成ppt
    条件允许的情况下，直接使用js生成ppt效果是最好的，生成ppt后可以重新编辑，效果也是最好。具体方法可以看我之前的博客使用js导出ppt之PptxGenJS中文文档。

  • 将网页转换成ppt

    • 将网页转换成ppt也有两种方式，第一种是按照用table写页面，然后进行转换。这个方式对样式的限制比较多，如果一开始没有按照要求开发，代码可能需要重构。具体方法可以看我之前的博客使用js导出ppt之PptxGenJS中文文档。
    • 另外一个方式是将现有的网页生成截图，然后将一整张图片插入ppt中。因为我们的网页之前已经写好了，所以今天主要介绍的也是这个方法。

网页转换成ppt

在将网页转换为ppt的过程中，首先需要将页面转换成图片，我用的是dom-to-image，具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const node = document.getElementById(id);
if (node) {
    domtoimage.toPng(node, {
          quality: 1,
          height: node.offsetHeight * scale,
          style: style,
          width: node.offsetWidth * scale
    }).then((dataUrl) => {
            const pptx = new PptxGenJS()
            const imgData = dataUrl.replace('data:', '')
            pptx.addNewSlide().addImage({ data: imgData, x: 0, y: 0, w: 10, h: 5.625, sizing: {
              type: 'crop',
              w: 10,
              h: 5.625
            } })
            pptx.save('testDemo')
          }).catch(function (error) {
            alert('发生错误')
          })
}

这样，一个单页的ppt就生成了。在实际的生产环境中，生成单页ppt的需求可能性很小，所以上面的代码需要改动一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
async function makePpt(list) {
    const pptx = new PptxGenJS()
    for (let i = 0; i < list.length; i++) {
        const imgData = await promiseDomToImg(list[i])
        pptx.addNewSlide().addImage({ data: imgData, x: 0, y: 0, w: 10, h: 5.625, sizing: {
              type: 'crop',
              w: 10,
              h: 5.625
        } })
    }
    pptx.save('testDemo')
}

function promiseDomToImg (id) {
    return New Promise((resolve, reject) => {
        const node = document.getElementById(id);
        domtoimage.toPng(node, {
            quality: 1,
            height: node.offsetHeight * scale,
            style: style,
            width: node.offsetWidth * scale
        }).then((dataUrl) => {
            const imgData = dataUrl.replace('data:', '')
            resolve(imgData)
        }).catch(function (error) {
            reject(error)
          })
    })
}

这样，网页转ppt就完成了。