Adding Cloudflare to Demos section #6

Open
TomDo1234 wants to merge 10 commits from TomDo1234/docs.sheetjs.com:master into master
Showing only changes of commit 7f64cfa3c4 - Show all commits

@ -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/)