使用 Svelte 逐行写入文本文件的内容

Question

我在 svelte 中编写了这段代码，打开一个 txt 文件，并将其写入 html 段落。这是代码：

<input type='file' multiple bind:files'>

{#if files}
    <h2>Files selected: </h2>
{#each Array.from(files) as file}
<p> IThe imported file is: {file.name}</p>
{#await file.text() then text}
<p>{text}</p>
{/await}
{/each}
{/if}

示例文件如下：

beans
spam
donut

但它给了我这个：

beans spam donut

如何<br>为文本中的每一行创建一个新行（段落或 ）？

Answer 1

这个怎么样？只需在换行符上拆分并创建一个新的 p 标签即可。

<script>
    let files;
</script>

<input type='file' multiple bind:files />

{#if files}
    <h2>Files selected: </h2>
{#each Array.from(files) as file}
<p> IThe imported file is: {file.name}</p>
{#await file.text() then text}
{#each text.split('\n') as line }
<p>{line}</p>
{/each}
{/await}
{/each}
{/if}