Skip to content

Commit 2787314

Browse files
michelle0927lcaresia
michelle0927
authored and
lcaresia
committed
New Components - html_to_image (#14655)
* new actions * pnpm-lock.yaml * fix typo
1 parent e8e492d commit 2787314

File tree

7 files changed

+401
-58
lines changed

7 files changed

+401
-58
lines changed

‎components/html_to_image/actions/convert-html-to-image/convert-html-to-image.mjs‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import htmlToImage from "../../html_to_image.app.mjs";
2+
3+
export default {
4+
key: "html_to_image-convert-html-to-image",
5+
name: "Convert HTML to Image",
6+
description: "Create an image from HTML. [See the documentation](https://docs.htmlcsstoimg.com/html-to-image-api/html-css-to-image-api).",
7+
version: "0.0.1",
8+
type: "action",
9+
props: {
10+
htmlToImage,
11+
htmlContent: {
12+
propDefinition: [
13+
htmlToImage,
14+
"htmlContent",
15+
],
16+
},
17+
cssContent: {
18+
propDefinition: [
19+
htmlToImage,
20+
"cssContent",
21+
],
22+
},
23+
font: {
24+
type: "string",
25+
label: "Font",
26+
description: "Google Font Name that needs to be imported when generating image from HTML & CSS. To pass multiple fonts, separate them with | sign. Example - `Roboto|Georgia`",
27+
optional: true,
28+
},
29+
quality: {
30+
propDefinition: [
31+
htmlToImage,
32+
"quality",
33+
],
34+
},
35+
},
36+
async run({ $ }) {
37+
const response = await this.htmlToImage.convertToImage({
38+
$,
39+
data: {
40+
html_content: this.htmlContent,
41+
css_content: this.cssContent,
42+
font: this.font,
43+
quality: this.quality,
44+
generate_img_url: true,
45+
},
46+
});
47+
$.export("$summary", "Successfully converted HTML to image");
48+
return response;
49+
},
50+
};

‎components/html_to_image/actions/convert-html-to-pdf/convert-html-to-pdf.mjs‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import htmlToImage from "../../html_to_image.app.mjs";
2+
3+
export default {
4+
key: "html_to_image-convert-html-to-pdf",
5+
name: "Convert HTML to PDF",
6+
description: "Create a PDF file from HTML. [See the documentation](https://docs.htmlcsstoimg.com/html-to-image-api/html-css-to-pdf-api).",
7+
version: "0.0.1",
8+
type: "action",
9+
props: {
10+
htmlToImage,
11+
htmlContent: {
12+
propDefinition: [
13+
htmlToImage,
14+
"htmlContent",
15+
],
16+
},
17+
cssContent: {
18+
propDefinition: [
19+
htmlToImage,
20+
"cssContent",
21+
],
22+
},
23+
paperSize: {
24+
propDefinition: [
25+
htmlToImage,
26+
"paperSize",
27+
],
28+
},
29+
landscape: {
30+
propDefinition: [
31+
htmlToImage,
32+
"landscape",
33+
],
34+
},
35+
displayHeaderFooter: {
36+
propDefinition: [
37+
htmlToImage,
38+
"displayHeaderFooter",
39+
],
40+
},
41+
printBackground: {
42+
propDefinition: [
43+
htmlToImage,
44+
"printBackground",
45+
],
46+
},
47+
preferCssPageSize: {
48+
type: "boolean",
49+
label: "Prefer CSS Page Size",
50+
description: "Get size from CSS styles. Default: `true`",
51+
optional: true,
52+
},
53+
},
54+
async run({ $ }) {
55+
const response = await this.htmlToImage.convertToPdf({
56+
$,
57+
data: {
58+
html_content: this.htmlContent,
59+
css_content: this.cssContent,
60+
paper_size: this.paperSize,
61+
landscape: this.landscape,
62+
displayHeaderFooter: this.displayHeaderFooter,
63+
printBackground: this.printBackground,
64+
preferCssPageSize: this.preferCssPageSize,
65+
generate_pdf_url: true,
66+
},
67+
});
68+
$.export("$summary", "Successfully converted HTML to PDF");
69+
return response;
70+
},
71+
};

‎components/html_to_image/actions/convert-url-to-image/convert-url-to-image.mjs‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import htmlToImage from "../../html_to_image.app.mjs";
2+
3+
export default {
4+
key: "html_to_image-convert-url-to-image",
5+
name: "Convert URL to Image",
6+
description: "Capture a screenshot from a URL. [See the documentation](https://docs.htmlcsstoimg.com/html-to-image-api/screenshot-capture-api).",
7+
version: "0.0.1",
8+
type: "action",
9+
props: {
10+
htmlToImage,
11+
url: {
12+
propDefinition: [
13+
htmlToImage,
14+
"url",
15+
],
16+
},
17+
viewPortWidth: {
18+
type: "integer",
19+
label: "View Port Width",
20+
description: "Width of View Port. Default value is 1080",
21+
optional: true,
22+
},
23+
viewPortHeight: {
24+
type: "integer",
25+
label: "View Port Height",
26+
description: "Height of View Port. Default value is 720",
27+
optional: true,
28+
},
29+
quality: {
30+
propDefinition: [
31+
htmlToImage,
32+
"quality",
33+
],
34+
},
35+
fullPage: {
36+
type: "boolean",
37+
label: "Full Page",
38+
description: "Whether to capture full-page screenshot of the URL. Default value is `false`.",
39+
optional: true,
40+
},
41+
waitUntil: {
42+
propDefinition: [
43+
htmlToImage,
44+
"waitUntil",
45+
],
46+
},
47+
},
48+
async run({ $ }) {
49+
const response = await this.htmlToImage.convertToImage({
50+
$,
51+
data: {
52+
url: this.url,
53+
viewPortWidth: this.viewPortWidth,
54+
viewPortHeight: this.viewPortHeight,
55+
quality: this.quality,
56+
full_page: this.fullPage,
57+
wait_till: this.waitUntil,
58+
generate_img_url: true,
59+
},
60+
});
61+
$.export("$summary", "Successfully converted URL to image");
62+
return response;
63+
},
64+
};

‎components/html_to_image/actions/convert-url-to-pdf/convert-url-to-pdf.mjs‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import htmlToImage from "../../html_to_image.app.mjs";
2+
3+
export default {
4+
key: "html_to_image-convert-url-to-pdf",
5+
name: "Convert URL to PDF",
6+
description: "Create a PDF from a URL. [See the documentation](https://docs.htmlcsstoimg.com/html-to-image-api/url-to-pdf-api).",
7+
version: "0.0.1",
8+
type: "action",
9+
props: {
10+
htmlToImage,
11+
url: {
12+
propDefinition: [
13+
htmlToImage,
14+
"url",
15+
],
16+
},
17+
paperSize: {
18+
propDefinition: [
19+
htmlToImage,
20+
"paperSize",
21+
],
22+
},
23+
landscape: {
24+
propDefinition: [
25+
htmlToImage,
26+
"landscape",
27+
],
28+
},
29+
displayHeaderFooter: {
30+
propDefinition: [
31+
htmlToImage,
32+
"displayHeaderFooter",
33+
],
34+
},
35+
printBackground: {
36+
propDefinition: [
37+
htmlToImage,
38+
"printBackground",
39+
],
40+
},
41+
waitUntil: {
42+
propDefinition: [
43+
htmlToImage,
44+
"waitUntil",
45+
],
46+
},
47+
},
48+
async run({ $ }) {
49+
const response = await this.htmlToImage.convertToPdf({
50+
$,
51+
data: {
52+
url: this.url,
53+
paper_size: this.paperSize,
54+
landscape: this.landscape,
55+
displayHeaderFooter: this.displayHeaderFooter,
56+
printBackground: this.printBackground,
57+
wait_till: this.waitUntil,
58+
generate_pdf_url: true,
59+
},
60+
});
61+
$.export("$summary", "Successfully converted URL to PDF");
62+
return response;
63+
},
64+
};

‎components/html_to_image/html_to_image.app.mjs‎

Lines changed: 92 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,99 @@
1+
import { axios } from "@pipedream/platform";
2+
13
export default {
24
type: "app",
35
app: "html_to_image",
4-
propDefinitions: {},
6+
propDefinitions: {
7+
url: {
8+
type: "string",
9+
label: "URL",
10+
description: "The URL of the webpage",
11+
},
12+
htmlContent: {
13+
type: "string",
14+
label: "HTML Content",
15+
description: "HTML Content to be used",
16+
},
17+
cssContent: {
18+
type: "string",
19+
label: "CSS Content",
20+
description: "CSS Content to be used",
21+
optional: true,
22+
},
23+
quality: {
24+
type: "integer",
25+
label: "Quality",
26+
description: "Quality of the image should be in the range 30-100. Default value is 30.",
27+
optional: true,
28+
},
29+
paperSize: {
30+
type: "string",
31+
label: "Paper Size",
32+
description: "Size of the paper",
33+
options: [
34+
"A3",
35+
"A4",
36+
"A5",
37+
"Letter",
38+
"Legal",
39+
],
40+
optional: true,
41+
},
42+
landscape: {
43+
type: "boolean",
44+
label: "Landscape",
45+
description: "Page orientation where the content is formatted horizontally. By default the page orientation is Portrait",
46+
optional: true,
47+
},
48+
displayHeaderFooter: {
49+
type: "boolean",
50+
label: "Display Header Footer",
51+
description: "Generated PDF with have header and Footer on each page",
52+
optional: true,
53+
},
54+
printBackground: {
55+
type: "boolean",
56+
label: "Print Background",
57+
description: "Prints any background colors or images used on the web page to the PDF. Its default value is `true`.",
58+
optional: true,
59+
},
60+
waitUntil: {
61+
type: "integer",
62+
label: "Wait Until",
63+
description: " Number of seconds to wait before capturing a screenshot from the URL. Default value is 0",
64+
optional: true,
65+
},
66+
},
567
methods: {
6-
// this.$auth contains connected account data
7-
authKeys() {
8-
console.log(Object.keys(this.$auth));
68+
_baseUrl() {
69+
return "https://api.htmlcsstoimg.com/api/v1";
70+
},
71+
_makeRequest({
72+
$ = this,
73+
path,
74+
...opts
75+
}) {
76+
return axios($, {
77+
url: `${this._baseUrl()}${path}`,
78+
headers: {
79+
"CLIENT-API-KEY": this.$auth.api_key,
80+
},
81+
...opts,
82+
});
83+
},
84+
convertToImage(opts = {}) {
85+
return this._makeRequest({
86+
method: "POST",
87+
path: "/generateImage",
88+
...opts,
89+
});
90+
},
91+
convertToPdf(opts = {}) {
92+
return this._makeRequest({
93+
method: "POST",
94+
path: "/generatePdf",
95+
...opts,
96+
});
997
},
1098
},
1199
};

‎components/html_to_image/package.json‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@pipedream/html_to_image",
3-
"version": "0.0.1",
3+
"version": "0.1.0",
44
"description": "Pipedream HTML to Image Components",
55
"main": "html_to_image.app.mjs",
66
"keywords": [
@@ -11,5 +11,8 @@
1111
"author": "Pipedream <[email protected]> (https://pipedream.com/)",
1212
"publishConfig": {
1313
"access": "public"
14+
},
15+
"dependencies": {
16+
"@pipedream/platform": "^3.0.3"
1417
}
15-
}
18+
}

0 commit comments

Comments
 (0)