一步步教你如何使用福昕低代码平台（三）：PDF转换成图片

已于 2024-12-16 18:17:20 修改
阅读量873 收藏 9
点赞数 27
分类专栏： 技术文章 PDFSDK 文章标签： 低代码 pdf CloudAPI PDF转换 PDF
于 2024-12-16 18:15:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lzfly/article/details/144407462
版权

在前面的文章中，我们已经学习了如何使用福昕低代码平台实现PDF文档拆分和PDF中的图片提取。今天，我们将继续使用福昕低代码平台，完成将
PDF转换成图片的功能。我们将继续使用之前的web工程。

关于PDF转图片

在现代办公环境中，PDF文件是最常见的文档格式之一。然而，有时我们需要将PDF文件中的内容转换为图片格式，以便于在网页上展示、进行图像处理或嵌入到其他文档中。本文将详细介绍如何使用福昕低代码平台，将PDF文件转换成图片，并将这些图片打包成一个zip文件供下载。通过创建一个简单的工作流和前端页面，我们可以快速实现这一功能。

要实现的功能

选择一个PDF文件，并将其转换为图片，压缩到一个zip包下载。

工作流创建

进入福昕低代码平台创建一个工作流，包含三个组件：

  • Http触发器
  • ConvertPDF动作组件
  • DownloadPDF组件
    如下图：
    工作流
    组件设置如下：

ConvertPDF组件：

  • 格式：“image”，选择image代表把PDF转为image
  • 文件：“$TriggerHttp_1.result.output.doc ”,从http触发器获取doc
  • DPI:“96”我就用默认设置96，这里还不支持变量，后续应该会改进吧。这个值会影响图片文件的大小
  • 页码范围：“$TriggerHttp_1.result.output.pagerange”，从http触发器获取doc,注意我们设置key值为“pagerange”

ConvertPDF设置

ConvertPDF组件：

文件:“$ConvertPDF_2.result.doc”,设置为ConvertPDF组件的结果文档。
DownloadPDF组件

运行工作流

运行工作流

Web代码编写

前端页面代码

继续在前面文章中的htm中加入代码片段，内容如下:

    <h1>PDF转图片</h1>
    <input type="file" id="pdf2img" accept="application/pdf">
    <input type="text" id="toimagerange" placeholder="输入要转成图片的PDF页码范围 (例如: 1-3)">
    <button id="pdf2ImgButton">提取图片</button>
    <div id="pdf2imgresult"></div>

生成的内容如下图红框所示：
界面
pdf2ImgButton对应的执行动作js脚本：

document.getElementById('pdf2ImgButton').addEventListener('click', function() {
    const fileInput = document.getElementById('pdf2img');
    const file = fileInput.files[0];
    const pageRange = document.getElementById('toimagerange').value;
    const extractResultDiv = document.getElementById('pdf2imgresult');
    if (file) { //    if (file && pageRange) {这里允许pagerange为空，为空就代表所有页面
        let formData = new FormData();
        formData.append('_', JSON.stringify({
            // 设置 TriggerHttp 节点的输出，其他节点可通过表达式`$TriggerHttp_xxx.result.output.xxx`进行引用，示例：
            // string: pageRange,
            // number: 111,
            // boolean: true,
            range:pageRange
        }));
        formData.append('doc', file);
        fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=f91a83e7-12bd-43fb-b93c-f73ae8929d75', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                const downloadUrl = data.data.payload.find(item => item.nodeId === 'DownloadPDF_3')?.result?.url;
                extractResultDiv.textContent = '文件上传成功，并下载图片压缩包。';
                if (downloadUrl) {
                    const encodedUrl = encodeURI(downloadUrl); // 对URL进行编码
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = encodedUrl;
                    a.download = decodeURIComponent(encodedUrl.split('/').pop()); // 使用原始文件名
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(encodedUrl);
                    extractResultDiv.textContent = '下载成功!';
                    extractResultDiv.style.color = 'green';
                } else {
                    extractResultDiv.textContent = '没有找到下载文件的URL!';
                    extractResultDiv.style.color = 'red';
                }

            })
            .catch((error) => {
                console.error('Error:', error);
                extractResultDiv.textContent = '图片提取失败!';
                extractResultDiv.style.color = 'red';
            });
    } else {
        alert('请选择一个PDF文件');
    }
});

其中，页码范围获取是：

    const pageRange = document.getElementById('toimagerange').value;

设置到formData的代码：

        formData.append('_', JSON.stringify({
            // 设置 TriggerHttp 节点的输出，其他节点可通过表达式`$TriggerHttp_xxx.result.output.xxx`进行引用，示例：
            // string: pageRange,
            // number: 111,
            // boolean: true,
            range:pageRange
        }));

文件获取：

    const fileInput = document.getElementById('pdf2img');
    const file = fileInput.files[0];

设置到FormData

	formData.append('doc', file);

触发器调用以及返回值处理：

        fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=f91a83e7-12bd-43fb-b93c-f73ae8929d75', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                const downloadUrl = data.data.payload.find(item => item.nodeId === 'DownloadPDF_3')?.result?.url;
                extractResultDiv.textContent = '文件上传成功，并下载图片压缩包。';
                if (downloadUrl) {
                    const encodedUrl = encodeURI(downloadUrl); // 对URL进行编码
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = encodedUrl;
                    a.download = decodeURIComponent(encodedUrl.split('/').pop()); // 使用原始文件名
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(encodedUrl);
                    extractResultDiv.textContent = '下载成功!';
                    extractResultDiv.style.color = 'green';
                } else {
                    extractResultDiv.textContent = '没有找到下载文件的URL!';
                    extractResultDiv.style.color = 'red';
                }

            })
            .catch((error) => {
                console.error('Error:', error);
                extractResultDiv.textContent = '图片提取失败!';
                extractResultDiv.style.color = 'red';
            });
    } else {
        alert('请选择一个PDF文件');
    }

保存文件运行

node server.js

运行结果
如下图：
运行结果
下面附上三个工具的完整代码：
index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>PDF小工具</title>
</head>
<body>
    <h1>PDF文件拆分工具</h1>
    <input type="file" id="pdfFile" accept="application/pdf">
    <button id="splitButton">拆分PDF</button>
    <div id="result"></div>
    <h1>PDF图片提取小工具</h1>
    <input type="file" id="pdfExtractImg" accept="application/pdf">
    <input type="text" id="pageRange" placeholder="输入页码范围 (例如: 1-3)">
    <button id="extractImgButton">提取图片</button>
    <div id="extractResult"></div>
    <h1>PDF转图片</h1>
    <input type="file" id="pdf2img" accept="application/pdf">
    <input type="text" id="toimagerange" placeholder="输入要转成图片的PDF页码范围 (例如: 1-3)">
    <button id="pdf2ImgButton">提取图片</button>
    <div id="pdf2imgresult"></div>
    <script src="script.js"></script>
</body>
</html>

script.js

document.getElementById('splitButton').addEventListener('click', async () => {
    const pdfFileInput = document.getElementById('pdfFile');
    const file = pdfFileInput.files[0];
    const messageDiv = document.getElementById('result');

    if (!file) {
        alert('请先选择一个PDF文件。');
        return;
    }

	let formData = new FormData();
	formData.append('_', JSON.stringify({
	  // 设置 TriggerHttp 节点的输出，其他节点可通过表达式`$TriggerHttp_xxx.result.output.xxx`进行引用，示例：
	  // string: 'str',
	  // number: 111,
	  // boolean: true,
	}));
	// 设置 TriggerHttp 节点的文件输出，其他节点可通过表达式`$TriggerHttp_xxx.result.output.xxx`进行引用，示例：
	// formData.append('doc', new File([''], 'doc.txt', { type: 'text/plain' }));
	formData.append('doc', file); // 上传的PDF文件
    fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=7b4c4d6b-bc7d-48de-afad-bb1039e12722', {
        method: 'POST',
        body: formData,
    })
        .then(response => response.json())
        .then(data => {
            console.log('Success:', data);

            // 查找下载文件URL和预览PDF URL
            const downloadUrl = data.data.payload.find(item => item.nodeId === 'DownloadPDF_3')?.result?.url;

                messageDiv.textContent = '文件上传成功，下载PDF。';
            if (downloadUrl) {
                const encodedUrl = encodeURI(downloadUrl); // 对URL进行编码
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = encodedUrl;
                a.download = decodeURIComponent(encodedUrl.split('/').pop()); // 使用原始文件名
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(encodedUrl);
                messageDiv.textContent = '文件下载成功!';
                messageDiv.style.color = 'green';
            } else {
                messageDiv.textContent = '没有找到下载文件的URL!';
                messageDiv.style.color = 'red';
            }

        })
        .catch((error) => {
            console.error('Error:', error);
            messageDiv.textContent = '文件上传失败!';
            messageDiv.style.color = 'red';
        });
});
document.getElementById('extractImgButton').addEventListener('click', function() {
    const fileInput = document.getElementById('pdfExtractImg');
    const file = fileInput.files[0];
    const pageRange = document.getElementById('pageRange').value;
    const extractResultDiv = document.getElementById('extractResult');
    if (file) { //    if (file && pageRange) {这里允许pagerange为空，为空就代表所有页面
        let formData = new FormData();
        formData.append('_', JSON.stringify({
            // 设置 TriggerHttp 节点的输出，其他节点可通过表达式`$TriggerHttp_xxx.result.output.xxx`进行引用，示例：
            // string: pageRange,
            // number: 111,
            // boolean: true,
            range:pageRange
        }));
        formData.append('doc', file);
        console.log('pageRange:', pageRange); // 调试输出

        fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=2541e2e2-64b9-420a-8e6b-147fa2a55dfd', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                const downloadUrl = data.data.payload.find(item => item.nodeId === 'DownloadPDF_3')?.result?.url;
                extractResultDiv.textContent = '文件上传成功，并下载图片压缩包。';
                if (downloadUrl) {
                    const encodedUrl = encodeURI(downloadUrl); // 对URL进行编码
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = encodedUrl;
                    a.download = decodeURIComponent(encodedUrl.split('/').pop()); // 使用原始文件名
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(encodedUrl);
                    extractResultDiv.textContent = '文件下载成功!';
                    extractResultDiv.style.color = 'green';
                } else {
                    extractResultDiv.textContent = '没有找到下载文件的URL!';
                    extractResultDiv.style.color = 'red';
                }

            })
            .catch((error) => {
                console.error('Error:', error);
                extractResultDiv.textContent = '图片提取失败!';
                extractResultDiv.style.color = 'red';
            });
    } else {
        alert('请选择一个PDF文件');
    }
});
document.getElementById('pdf2ImgButton').addEventListener('click', function() {
    const fileInput = document.getElementById('pdf2img');
    const file = fileInput.files[0];
    const pageRange = document.getElementById('toimagerange').value;
    const extractResultDiv = document.getElementById('pdf2imgresult');
    if (file) { //    if (file && pageRange) {这里允许pagerange为空，为空就代表所有页面
        let formData = new FormData();
        formData.append('_', JSON.stringify({
            // 设置 TriggerHttp 节点的输出，其他节点可通过表达式`$TriggerHttp_xxx.result.output.xxx`进行引用，示例：
            // string: pageRange,
            // number: 111,
            // boolean: true,
            range:pageRange
        }));
        formData.append('doc', file);
        fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=f91a83e7-12bd-43fb-b93c-f73ae8929d75', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                const downloadUrl = data.data.payload.find(item => item.nodeId === 'DownloadPDF_3')?.result?.url;
                extractResultDiv.textContent = '文件上传成功，并下载图片压缩包。';
                if (downloadUrl) {
                    const encodedUrl = encodeURI(downloadUrl); // 对URL进行编码
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = encodedUrl;
                    a.download = decodeURIComponent(encodedUrl.split('/').pop()); // 使用原始文件名
                    document.body.appendChild(a);
                    a.click();
                    window.URL.revokeObjectURL(encodedUrl);
                    extractResultDiv.textContent = '下载成功!';
                    extractResultDiv.style.color = 'green';
                } else {
                    extractResultDiv.textContent = '没有找到下载文件的URL!';
                    extractResultDiv.style.color = 'red';
                }

            })
            .catch((error) => {
                console.error('Error:', error);
                extractResultDiv.textContent = '图片提取失败!';
                extractResultDiv.style.color = 'red';
            });
    } else {
        alert('请选择一个PDF文件');
    }
});

简简单单，要不要试试！

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值