如何读取本地HTML文件并在前端页面正确展示其文本内容？

核心问题说明 #

• <p> 标签没有原生的 src 属性，无法通过赋值该属性加载外部链接的文本内容
• 你当前使用的 readAsDataURL 适用于读取媒体类文件为base64编码，读取纯文本/HTML源码应该使用 FileReader 的 readAsText 方法

方案1：直接展示HTML源码内容 #

如果只是需要展示文件里的原始文本内容，不需要渲染HTML效果，直接把读取到的文本赋值给p标签的textContent属性即可：

<input type="file" accept=".html, .htm" onchange="previewFile()"><br>
<p id="txt1"></p>

<script>
function previewFile() {
  const preview = document.getElementById('txt1');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // 直接把读取到的文本内容赋值给元素展示
    preview.textContent = reader.result;
  }, false);

  if (file) {
    reader.readAsText(file);
  }
}
</script>

方案2：渲染HTML的实际页面效果 #

如果需要让用户看到HTML文件渲染后的实际页面效果，建议使用支持src属性的<iframe>标签加载Blob链接，同时可以隔离上下文避免未知HTML的XSS风险：

<input type="file" accept=".html, .htm" onchange="previewFile()"><br>
<iframe id="previewFrame" width="100%" height="500px" frameborder="0"></iframe>

<script>
function previewFile() {
  const preview = document.getElementById('previewFrame');
  const file = document.querySelector('input[type=file]').files[0];

  if (file) {
    const blobUrl = window.URL.createObjectURL(file);
    preview.src = blobUrl;
    // 页面销毁时记得释放Blob链接占用的内存
    preview.onload = () => window.URL.revokeObjectURL(blobUrl);
  }
}
</script>

如果不想用iframe，也可以把读取到的HTML文本赋值给普通元素的innerHTML属性，注意该方案存在XSS注入风险，仅建议处理可信来源的HTML文件。

内容的提问来源于stack exchange，提问作者user16720635