如何定位文本 blob 内的内容？

Question

我会长话短说。以下是我用来将 textarea 标记内的文本转换为 .txt 文件的方法：

<textarea id="inputTextToSave"></textarea>

 

<button onclick="saveTextAsFile()">SAVE</button>

<textarea id="string"></textarea>

<script>

function saveTextAsFile()

{
    var textToWrite = document.getElementById("inputTextToSave").value;
    var textFileAsBlob = new Blob([textToWrite], {type:'text/plain;charset=utf-8'});
    


document.getElementById("string").innerHTML= textFileAsBlob.txt;
}

    </script>

问题是每当我运行该函数并尝试将“inputTextToSave”文本区域中的 blob 内容插入“string”文本区域时，它都不会呈现文本。本质上，我试图定位 blob 内的内容，以便稍后将它们上传到数据库，并且该数据库仅接受 .txt 文件。任何帮助将不胜感激。谢谢！

Answer 1

尝试使用 await textFileAsBlob.text() 将 blob 转换为字符串（不要忘记将函数声明为 async 以使用 await 方法，因为 Blob.text() 方法返回 Promise，而不是实际结果）。

示例：

import { Blob } from 'buffer';

const textFileAsBlob = new Blob(['xxxx'], {type:'text/plain;charset=utf-8'});
console.log(`textFileAsBlob = ${textFileAsBlob}`)

const stringFromBlob = await textFileAsBlob.text()
console.log(`stringFromBlob = ${stringFromBlob}`)

结果：

文档：https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

基于您的代码的代码片段：

async function saveTextAsFile() {
    const textToWrite = document.getElementById("inputTextToSave").value;
    const textFileAsBlob = new Blob([textToWrite], {type:'text/plain;charset=utf-8'});
    document.getElementById("string").innerHTML= await textFileAsBlob.text();
}

<textarea id="inputTextToSave"></textarea>
<button onclick="saveTextAsFile()">SAVE</button>
<textarea id="string"></textarea>