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

Question

我在打开一个txt文件的svelte中编写了这段代码，并将它写在一个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}