如何下載產出檔案

每一張 Stitch 螢幕都會產生兩種可下載的產出檔案：HTML 檔案（內含行內 Tailwind CSS 的完整文件）與截圖影像。SDK 會提供下載 URL——你只要擷取並儲存即可。

取得下載 URL

import { stitch } from "@google/stitch-sdk";

const projects = await stitch.projects();
const screens = await projects.at(0).screens();
const screen = screens.at(0);

const htmlUrl = await screen.getHtml();
const imageUrl = await screen.getImage();

將 HTML 儲存到磁碟

import fs from "fs/promises";

const response = await fetch(htmlUrl);
const html = await response.text();
await fs.writeFile(`${screen.id}.html`, html);

在瀏覽器中開啟這個檔案，你會看到完整算繪的設計與 Tailwind 類別。

儲存截圖影像

圖像會以二進位資料形式傳回。請使用 arrayBuffer() 而非 text()：

const imgResponse = await fetch(imageUrl);
const buffer = await imgResponse.arrayBuffer();
await fs.writeFile(`${screen.id}.jpeg`, Buffer.from(buffer));

批次下載專案中的所有螢幕

import fs from "fs/promises";
import path from "path";

const outDir = "./designs";
await fs.mkdir(outDir, { recursive: true });

const project = (await stitch.projects()).at(0);
const screens = await project.screens();

for (const screen of screens) {
  const htmlUrl = await screen.getHtml();
  if (htmlUrl) {
    const res = await fetch(htmlUrl);
    await fs.writeFile(path.join(outDir, `${screen.id}.html`), await res.text());
  }

  const imgUrl = await screen.getImage();
  if (imgUrl) {
    const res = await fetch(imgUrl);
    await fs.writeFile(path.join(outDir, `${screen.id}.jpeg`), Buffer.from(await res.arrayBuffer()));
  }
}

console.log(`Downloaded ${screens.length} screens to ${outDir}`);