Svelte：如何从“可写存储”创建 Blob？

Question

如何使用“可写存储”创建“blob”？

我是 Svelte 的新手。我正在尝试为视障用户编写一个简单的降价编辑器。 “textarea”的内容存储在“可写存储”中以供进一步使用：

语音合成
降价预览
现有文本文件的内容存储在其中
将文本保存到文件

但是通过下载到文件保存文本内容是行不通的。

<script>
  let blob = new Bob([$textStore], type:"text/plain");
  let url = URL.createObjectURL(blob);
</script>

<button>
  <a href={url} download="untitled.md" id="link">Download 
  </a>
</button>

当我使用 curley 括号时，保存了一个空文件或内容为“[object Object]”:

let blob = new Blob ([{$textStore}], {type: 'text/plain'});

测试文件：

// TextStore.js        
import { writable } from "svelte/store";
    
export const textStore = writable('');

<!-- EditorTest.svelte -->
<script>
  import { textStore } from "./TextStore.js";

  let blob = new Blob ([{$textStore}], {type: 'text/plain'});
  let url = URL.createObjectURL(blob);
</script>


<h1>Blob-Test</h1>
<textarea bind:value={$textStore} cols="20" rows="5"></textarea>
<hr>
<pre>{$textStore}</pre>
<br>
<button>
  <a href={url} download="untitled.md" id="link">Save</a>
</button>

有人可以帮忙吗，已经非常感谢了。

Answer 1

主要问题是代码没有对更改做出反应。 Blob 在开始时创建一次，当时商店仍然是空的。您可以使用 $: 使其具有反应性，但这不是一个好主意，因为它不必要地 re-creates Blob 一遍又一遍。

我建议在按钮上使用点击处理程序（其中的 link 无效 HTML），然后在那里创建 Blob：

<button on:click={onDownload}>
    Save
</button>

function onDownload() {
    const blob = new Blob([$textStore], {type: 'text/plain'});
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.download = 'file.md';
    link.href = url;
    link.click();
    URL.revokeObjectURL(url); // Object URLs should be revoked after use
}

Svelte：如何从“可写存储”创建 Blob？

Svelte: how to create a Blob from `writable store`?

blob

store

svelte

writable

createobjecturl