Skip to main content

<Artifact>v4.0.176

通过在您的 Remotion 标记中呈现 <Artifact> 标签，在渲染过程中会生成额外的文件。

MyComp.tsx
tsx
import { Artifact, useCurrentFrame } from "remotion";
 
export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return frame === 0 ? (
    <Artifact filename="my-file.txt" content="Hello World!" />
  ) : null;
};
MyComp.tsx
tsx
import { Artifact, useCurrentFrame } from "remotion";
 
export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return frame === 0 ? (
    <Artifact filename="my-file.txt" content="Hello World!" />
  ) : null;
};

如果在 CLI 或通过 Studio 上渲染，这将会生成一个额外的文件：

$ npx remotion render MyComp
+ out/MyComp.mp4
+ my-file.txt (12B)
$ npx remotion render MyComp
+ out/MyComp.mp4
+ my-file.txt (12B)

允许一个组合生成多个文件。
但是，文件名必须是唯一的。

该组件将在每一帧上进行评估，这意味着如果您只想生成一个文件，只需在一个帧上进行渲染。

❌ 将在每一帧上生成一个资源并抛出错误，因为文件名不唯一
tsx
import { Artifact, useCurrentFrame } from "remotion";
 
export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return frame === 0 ? (
    <Artifact filename="my-file.txt" content="Hello World!" />
  ) : null;
};
❌ 将在每一帧上生成一个资源并抛出错误，因为文件名不唯一
tsx
import { Artifact, useCurrentFrame } from "remotion";
 
export const MyComp: React.FC = () => {
  const frame = useCurrentFrame();
 
  return frame === 0 ? (
    <Artifact filename="my-file.txt" content="Hello World!" />
  ) : null;
};

API​

filename​

一个字符串，表示将要生成的文件的名称。
只能使用正斜杠，即使在 Windows 上也是如此。
必须匹配正则表达式 /^([0-9a-zA-Z-!_.*'()/:&$@=;+,?]+)/g。

content​

一个 string 或 Uint8Array，表示将要生成的文件的内容。不要认为 Uint8Array 更快，因为它需要被序列化。

参见​