福昕低代码平台Http触发器的使用

1年多前写的文章，发现忘记发了，发出去吧~~

HTTP触发器简介

HTTP触发器是一种通过HTTP请求触发工作流的机制。用户可以通过发送HTTP POST请求，将所需的数据传递给指定的URL，从而启动工作流。HTTP触发器的主要优势在于其简单易用，适用于各种编程语言和环境。

快速使用指南

以下以实现文档转换为例说明如何调通过低代码平台，快速实现word到PDF的转换，并下载。

工作流创建

首先需要创建一个由HTTP触发的工作流，我们需要CreatePDF组件，Download PDF组件以及一个Http触发器。如下图，先向工作流添加上述组件，并按Http触发，CreatePDF，Download PDF顺序连接组件

设置"Create PDF组件"信息，格式选择"word",文件选择表达式 并输入"$TriggerHttp_1.result.output.doc"代表从http触发器获取doc信息作为输入参数：

注意：表达式输入" $ "符号，就会出现提示，根据提示进行输入即可。

设置"Download PDF组件",文件设置为CreatePDF组件的输出结果："$CreatePDF_3.result.doc"

运行工作流获取触发脚本

完成设置后运行触发器运行成功将会返回如下图所示的触发脚本：

Web页面创建

首先创建一个简单的HTML文件，作为示例，创建一个包括一个上传，以及一个下载按钮的html页面，并且调用js来实现按钮功能，代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
<h1>Cloud APIs Studio 示例-Word2PDF</h1>
<form id="uploadForm">
    <input type="file" id="fileInput" accept=".doc,.docx" required>
    <button type="submit">下载转换结果</button>
</form>
<div id="message"></div>

<script src="upload.js"></script>
</body>
</html>

后端js脚本编写

创建FormData对象：首先，创建一个FormData对象，用于存储需要发送的数据。

javascript 复制代码

let formData = new FormData();

设置TriggerHttp节点的输出：使用formData.append方法将输出数据添加到FormData对象中。可以通过表达式$TriggerHttp_xxx.result.output.xxx引用其他节点的输出。例如：

javascript 复制代码

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

目前暂时没有用到上述参数，代码只是示例。
设置TriggerHttp节点的文件输出：如果需要上传文件，可以使用formData.append方法将文件添加到FormData对象中。例如：

javascript 复制代码

        formData.append('doc', file);

发送HTTP请求 ：使用fetch方法发送HTTP POST请求，将FormData对象作为请求体传递。示例代码如下：
注意： workflow ID需要是你工作流运行后返回的信息，请直接复制工作流运行结果返回的信息进行修改

javascript 复制代码

fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=4a89f56e-06ef-4080-9242-3407c7b25ee7', {
  method: 'POST',
  body: formData,
});

完整的upload.js 文件如下：

javascript 复制代码

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

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

    if (file) {
        let formData = new FormData();
        formData.append('_', JSON.stringify({
            // 设置 TriggerHttp 节点的输出，其他节点可通过表达式`$TriggerHttp_xxx.result.output.xxx`进行引用
            string: 'example string',
            number: 123,
            boolean: true
        }));
        formData.append('doc', file);

        fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=4a89f56e-06ef-4080-9242-3407c7b25ee7', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                const downloadUrl = data.data.payload.find(item => item.nodeId === 'DownloadPDF_2').result.url;
                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 = 'File uploaded and document downloaded successfully!';
                    messageDiv.style.color = 'green';
                } else {
                    messageDiv.textContent = 'Download URL not found!';
                    messageDiv.style.color = 'red';
                }
            })
            .catch((error) => {
                console.error('Error:', error);
                messageDiv.textContent = 'File upload failed!';
                messageDiv.style.color = 'red';
            });
    } else {
        alert('Please select a file.');
    }
});

将上述的html文件和js文件放到同一目录即可实现从web页面选择一个文件转换成PDF文件并下载的功能。

如果你只需要完成一个工作流，并且下载结果文件，上述步骤即可。

显示转换结果

工作流中增加PreviewPDF组件

如果要显示转换结果，需要在工作流中增加一个"PreviewPDF"组件,并设选择其文件参数为表达式 ，设置其值为转换结果的输出文件" $CreatePDF_3.result.doc "

添加一个"< iframe > "元素到HTML文件中，并在upload.js中处理文件上传和PDF预览的逻辑

html 复制代码

<iframe id="pdf-preview" style="width: 600px; height: 800px; border: 1px solid #ddd; border-radius: 4px; display: none;"></iframe>

upload.js只需要在http返回中增加pdf-preview的url即可，代码如下:

javascript 复制代码

                const previewUrl =  data.data.payload.find(item => item.nodeId === 'PreviewPDF_4').result.url;

                // 设置 iframe 的 src 属性为提取到的 URL
                const iframe = document.getElementById('pdf-preview');
                iframe.src = previewUrl;
                iframe.style.display = 'block';

完整的代码示例

转换，下载，预览功能的完整的html文件

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
<h1>Cloud APIs Studio 示例-Word2PDF带预览</h1>
<form id="uploadForm">
    <input type="file" id="fileInput" accept=".doc,.docx" required>
    <button type="submit">下载转换结果</button>
</form>
<div id="message"></div>
<iframe id="pdf-preview" style="width: 600px; height: 800px; border: 1px solid #ddd; border-radius: 4px; display: none;"></iframe>
<!--<script src="upload.js"></script>-->

<script src="upload.js?v=<?php echo time(); ?>"></script>
</body>
</html>

upload.js文件

javascript 复制代码

document.getElementById('uploadForm').addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为

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

    if (file) {
        let formData = new FormData();
        formData.append('_', JSON.stringify({
            // 设置 TriggerHttp 节点的输出，其他节点可通过表达式`$TriggerHttp_xxx.result.output.xxx`进行引用
            string: 'example string',
            number: 123,
            boolean: true
        }));
        formData.append('doc', file);

        fetch('https://cloudapis-studio.foxitsoftware.cn/studio-server/api/fbp/trigger?workflowId=4a89f56e-06ef-4080-9242-3407c7b25ee7', {
            method: 'POST',
            body: formData,
        })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
                const downloadUrl = data.data.payload.find(item => item.nodeId === 'DownloadPDF_2').result.url;
                const previewUrl =  data.data.payload.find(item => item.nodeId === 'PreviewPDF_4').result.url;
                // 设置 iframe 的 src 属性为提取到的 URL
                const iframe = document.getElementById('pdf-preview');
                iframe.src = previewUrl;
                iframe.style.display = 'block';
                document.getElementById('message').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';
            });
    } else {
        alert('Please select a file.');
    }
});

Http触发的返回值说明

如何查看返回数据的情况

您有通过浏览器的调试模式查看http触发后，每个组件的返回数据格式以及数据，如下图：

或者通过控制台查看:

其他说明

我们将在后续支持更多的参数通过表达式传递，也将有更详细的返回值说明