Adding Cloudflare to Demos section #6
@ -226,6 +226,187 @@ Please visit the [official pricing model for R2 for more info](https://developer
|
||||
|
||||
:::
|
||||
|
||||
This sample fetches a buffer from R2 and parses the workbook.
|
||||
|
||||
1) If you do not have an account, create a new Cloudflare account [^7]
|
||||
|
||||
2) Once in the dashboard, click on R2 , you will need a valid credit card to get access to R2
|
||||
|
||||
3) Click on Create Bucket. Select your bucket name and region. Then click "Create Bucket" at the bottom
|
||||
|
||||
4) Click on R2 again on the dashboard, then click Manage R2 API Tokens
|
||||
|
||||
5) Click on Create API Token, then make sure to set the correct permissions for what you want to do, then click "Create API Token" at the bottom
|
||||
|
||||
#### Set up Project
|
||||
|
||||
6) Create a new NodeJS project and install dependencies:
|
||||
|
||||
```bash
|
||||
mkdir SheetJSR2
|
||||
cd SheetJSR2
|
||||
npm init -y
|
||||
# Install Dependencies
|
||||
mkdir -p node_modules
|
||||
npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz @aws-sdk/client-s3@3.540.0
|
||||
```
|
||||
|
||||
#### Write Test
|
||||
|
||||
:::note pass
|
||||
|
||||
This sample creates a simple workbook, generates a NodeJS buffer, and uploads
|
||||
the buffer to S3.
|
||||
|
||||
```
|
||||
| A | B | C | D | E | F | G |
|
||||
---+---|---|---|---|---|---|---|
|
||||
1 | S | h | e | e | t | J | S |
|
||||
2 | 5 | 4 | 3 | 3 | 7 | 9 | 5 |
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
7) Save the following script to `SheetJSWriteToR2.js`:
|
||||
|
||||
```js title="SheetJSWriteToR2.js"
|
||||
const { PutObjectCommand, S3Client } = require("@aws-sdk/client-s3");
|
||||
const XLSX = require("xlsx");
|
||||
|
||||
/* replace these constants */
|
||||
// highlight-start
|
||||
var accessKeyId = "accessKeyId";
|
||||
var secretAccessKey = "secretAccessKey";
|
||||
var Bucket = "Bucket";
|
||||
// highlight-end
|
||||
|
||||
var region = "REGION";
|
||||
var Key = "sheetjstest.xlsx";
|
||||
var endpoint = "ENDPOINT";
|
||||
|
||||
/* Create a simple workbook and write XLSX to buffer */
|
||||
var ws = XLSX.utils.aoa_to_sheet(["SheetJS".split(""), [5,4,3,3,7,9,5]]);
|
||||
var wb = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
|
||||
var Body = XLSX.write(wb, {type: "buffer", bookType: "xlsx"});
|
||||
|
||||
/* upload to R2 */
|
||||
var s3 = new S3Client({
|
||||
credentials: {
|
||||
accessKeyId,
|
||||
secretAccessKey
|
||||
},
|
||||
region,
|
||||
endpoint
|
||||
});
|
||||
|
||||
const command = new PutObjectCommand({
|
||||
Body,
|
||||
Bucket,
|
||||
Key
|
||||
})
|
||||
|
||||
s3.send(command).then(data => {
|
||||
console.log("Entity Tag: " + data.ETag);
|
||||
}).catch(e => {
|
||||
throw e
|
||||
});
|
||||
```
|
||||
|
||||
:::note pass
|
||||
|
||||
Although this minimal example is in regular js and therefore cannot use async await syntax at top level, be aware that the S3 SDK is async
|
||||
and thus you can use async await if you wish
|
||||
|
||||
:::
|
||||
|
||||
1) Edit `SheetJSWriteToR2.js` and replace the highlighted lines:
|
||||
|
||||
- `accessKeyId`: access key for the AWS account
|
||||
- `secretAccessKey`: secret access key for the AWS account
|
||||
- `Bucket`: name of the bucket
|
||||
- `REGION`: region of the bucket
|
||||
- `ENDPOINT`: endpoint of your cloudflare R2, should end with .r2.cloudflarestorage.com ,
|
||||
To get this endpoint go to the settings of your bucket and copy the "S3 API" in Bucket details, remove the /bucket-name at the end of the url
|
||||
|
||||
The keys are found in the CSV from step 22. The Bucket is the name from step 5.
|
||||
|
||||
1) Run the script:
|
||||
|
||||
```bash
|
||||
node SheetJSWriteToR2.js
|
||||
```
|
||||
|
||||
This file will be stored with the object name `test.xlsx`. It can be manually
|
||||
downloaded from the S3 web interface.
|
||||
|
||||
#### Read Test
|
||||
|
||||
This sample will download and process the test file from "Write Test".
|
||||
|
||||
10) Save the following script to `SheetJSReadFromR2.js`:
|
||||
|
||||
```js title="SheetJSReadFromR2.js"
|
||||
const { GetObjectCommand, S3Client } = require("@aws-sdk/client-s3");
|
||||
const XLSX = require("xlsx");
|
||||
|
||||
/* replace these constants */
|
||||
// highlight-start
|
||||
var accessKeyId = "accessKeyId";
|
||||
var secretAccessKey = "secretAccessKey";
|
||||
var Bucket = "Bucket";
|
||||
// highlight-end
|
||||
|
||||
var region = "REGION";
|
||||
var Key = "sheetjstest.xlsx";
|
||||
var endpoint = "ENDPOINT";
|
||||
|
||||
/* upload to R2 */
|
||||
var s3 = new S3Client({
|
||||
credentials: {
|
||||
accessKeyId,
|
||||
secretAccessKey
|
||||
},
|
||||
region,
|
||||
endpoint
|
||||
});
|
||||
|
||||
const command = new GetObjectCommand({
|
||||
Bucket,
|
||||
Key
|
||||
})
|
||||
|
||||
s3.send(command).then(async (data) => {
|
||||
var wb = XLSX.read(await data.Body?.transformToByteArray());
|
||||
console.log(XLSX.utils.sheet_to_csv(wb.Sheets[wb.SheetNames[0]]));
|
||||
}).catch(e => {
|
||||
throw e
|
||||
});
|
||||
```
|
||||
|
||||
11) Edit `SheetJSReadFromR2.js` and replace the highlighted lines:
|
||||
|
||||
- `accessKeyId`: access key for the AWS account
|
||||
- `secretAccessKey`: secret access key for the AWS account
|
||||
- `Bucket`: name of the bucket
|
||||
- `REGION`: region of the bucket
|
||||
- `ENDPOINT`: endpoint of your cloudflare R2, should end with .r2.cloudflarestorage.com ,
|
||||
To get this endpoint go to the settings of your bucket and copy the "S3 API" in Bucket details, remove the /bucket-name at the end of the url
|
||||
|
||||
The keys are found in the CSV from Step 22. The Bucket is the name from Step 5.
|
||||
|
||||
12) Run the script:
|
||||
|
||||
```bash
|
||||
node SheetJSReadFromR2.js
|
||||
```
|
||||
|
||||
The program will display the data in CSV format.
|
||||
|
||||
```
|
||||
S,h,e,e,t,J,S
|
||||
5,4,3,3,7,9,5
|
||||
```
|
||||
|
||||
[^1]: See ["Node.js compatibility"](https://developers.cloudflare.com/workers/runtime-apis/nodejs/) in the Cloudflare documentation
|
||||
[^2]: See ["Get started guide"](https://developers.cloudflare.com/workers/get-started/guide/#1-create-a-new-worker-project)
|
||||
[^3]: [Wrangler documentation](https://developers.cloudflare.com/workers/wrangler/)
|
||||
|
Loading…
Reference in New Issue
Block a user