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

Вместо readAsDataURL вы должны использовать readAsText, чтобы получить текст вместо 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>