VueJS 解码 base64 html 字符串

Question

为了实现可上传 HTML 文件的实时预览，我需要解码 base64 字符串的帮助。

当我将文件传递给输入元素并使用 FileReader() 读取它时，我得到一个 base64 编码的字符串。

我需要做什么才能将其转换为 HTML/TXT？

我已经找到了一些关于解码图片的东西，不幸的是这对我没有帮助。

handleFileUpload() {
          this.file = this.$refs.file.files[0];
          let reader = new FileReader();

          reader.addEventListener("load", function() {
            this.html = atob(reader.result);
          }.bind(this), false);

          reader.readAsDataURL(this.file);
        },

输出：

data:text/html;base64,PGh0bWwgeG1sbnM6dj0idXJuOnNjaGVtYXMtbWljcm9zb2Z0LWNvbTp2bWwiDQp4bWxuczpvPSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTpvZmZpY2UiDQp4bWxuczp4PSJ1cm46c2NoZW1hcy1taWNyb3NvZnQtY29tOm9mZmljZTpleGNlbCINCnhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy9UUi9SRUMtaHRtbDQwIj4NCg0KPGhlYWQ+DQo8bWV0YSBodHRwLWVxdWl2PUNvbnRlbnQtVHlwZSBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9d2luZG93cy0xMjUyIj4NCjxtZXRhIG5hbWU9UHJvZ0lkIGNvbnRlbnQ9RXhjZWwuU2hlZXQ+DQo8bWV0YSBuYW1lPUdlbmVyYXRvciBjb250ZW50PSJNaWNyb3NvZnQgRXhjZWwgMTUiPg0KPGxpbmsgaWQ9TWFpbi1GaWxlIHJlbD1NY......

Answer 1

您应该使用 readAsText 而不是 readAsDataURL，这样您得到的是文本而不是 blob。

handleFileUpload() {
          this.file = this.$refs.file.files[0];
          let reader = new FileReader();

          reader.addEventListener("load", function() {
            this.html = reader.result;
          }.bind(this), false);

          reader.readAsText(this.file);
        },

Answer 2

您可以预览您的 html 文件，Math Ellen 的答案是将结果放入 html 对象中，如下所示：

    <object type="text/html"
     data="file.html"
     width="250"
     height="200">
    </object>

VueJS 解码 base64 html 字符串

VueJS decode base64 html string

javascript

base64

vue.js