Как показать base64 как скачиваемую ссылку в HTML?

Question

У меня есть этот список base64, возвращаемый из службы sprinboot, поскольку этот объект находится внутри объекта "Ticket":

ticketFiles: Array(1)
0: {id: 475, ticketFile: "data:text/plain;base64,Wz8xMy8/MDEvPzIwMjAgMTE6MDZ…rZXIgZGEgU2lsdmE6ICANCkRlcG9pcyBwb2RlIHNpbQ0KIA0K"}
length: 1
__proto__: Array(0)

Сейчас я создаю представление в angular, и мне нужно показать его как ссылку доступно для скачивания:

<div class="col s12">
    <h4>Ticket Files</h4>
    <table style="width:100%">
        <thead>
        </thead>
        <tbody>
            <tr *ngFor="let ticketFile of ticket.ticketFiles">
                <td>{{ticketFile.ticketFile}}</td>
</tr>
       </tbody>
   </table>
</div>

Но при этом отображается только base64 в виде простого текста. Итак, как мне создать ссылку с именем файла "например:" ferias.txt "и эта ссылка загружает файл?

Answer 1

Вы можете справиться с этим полностью за js

ticketFile = data // link the data to this variable 
 const file = window.btoa(binary);
    const a = document.createElement('a');
          a.href = file;
          a.download = fileName.txt;

<div class="col s12">
    <h4>Ticket Files</h4>
    <table style="width:100%">
        <thead>
        </thead>
        <tbody>
            <tr *ngFor="let ticketFile of ticket.ticketFiles">
                <td><a [href]="ticketFile.ticketFile">{{ticketFile.ticketFile}}</a></td>
</tr>
       </tbody>
   </table>
</div>

Answer 2

Загрузка ресурсов с использованием тега a

let dl = document.createElement("a");

dl.href = baseData; // "data:text/plain;base64,Wz8xMy8/MDEvPzIwMjAgMTE6MDZ…rZXIgZGEgU2lsdmE6ICANCkRlcG9pcyBwb2RlIHNpbQ0KIA0K"

dl.download = "filename.txt";

dl.click();

или использование шаблона рендеринга

<tr *ngFor="let ticketFile of ticket.ticketFiles">
  <td>
   <a download="{{ticketFile.id}}.txt" [href]="ticketFile.ticketFile"> 
      {{ticketFile.id}}.txt
   </a>
  </td>
</tr>