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

在前面的文章中，我们已经学习了如何使用福昕低代码平台实现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';
                }

            }