2. Algorithm
  3. javascript - How to open a string as a HTML content in a new tab? - Stack Overflow

javascript - How to open a string as a HTML content in a new tab? - Stack Overflow

admin2025-04-10  0
public openNewTab(blob: Blob | string) {
   const data = 'data:text/plain;charset=utf-8,' + encodeURIComponent(blob);
   window.open(data, '_blank');
   setTimeout(() => window.URL.revokeObjectURL(data), 100);
}

I'm trying to open blob file (in this example it's a string) into a new tab as a HTML content. This function works fine but it opens a plain text content and tags are just written like "<html><head><title>...." as a text. I want to display the HTML content. I tried to define data as text/html but it doesn't work. How can I do that without using any library? Also I tried to use anchor tag like this;

   const anchorElement = document.createElement('a');
   document.body.appendChild(anchorElement);
   anchorElement.setAttribute('href', data);
   anchorElement.setAttribute('target', '_blank');
   anchorElement.click();

It has same result with window.open().

public openNewTab(blob: Blob | string) {
   const data = 'data:text/plain;charset=utf-8,' + encodeURIComponent(blob);
   window.open(data, '_blank');
   setTimeout(() => window.URL.revokeObjectURL(data), 100);
}

I'm trying to open blob file (in this example it's a string) into a new tab as a HTML content. This function works fine but it opens a plain text content and tags are just written like "<html><head><title>...." as a text. I want to display the HTML content. I tried to define data as text/html but it doesn't work. How can I do that without using any library? Also I tried to use anchor tag like this;

   const anchorElement = document.createElement('a');
   document.body.appendChild(anchorElement);
   anchorElement.setAttribute('href', data);
   anchorElement.setAttribute('target', '_blank');
   anchorElement.click();

It has same result with window.open().

  • javascript
  • html
  • typescript
  • data-uri
Share Improve this question edited Apr 27, 2021 at 20:27 Oguz Aktas asked Apr 27, 2021 at 20:09 Oguz AktasOguz Aktas 572 silver badges10 bronze badges 1
  • The question is not about <pre> tag. The tags displayed as a text. I want to display the HTML content. – Oguz Aktas Commented Apr 27, 2021 at 20:18
Add a ment  | 

2 Answers 2

Reset to default 4

You are telling the browser the content is text/plain - thats why it's handled as text only. Change it to text/html and it should work.

As an alternative you can set the content of opened window with window.document.write().

document.querySelector("#someButton").onclick = function() {
  let child = window.open("about:blank","myChild");
  child.document.write(`<html>
    <head><title>Hi mum!</title></head>
    <body><p>Hello World</p></body>
   </html>`);
  child.document.close();
}

Working fiddle.

You could achive it using the write function of the window document as follows:

public openNewTab(blob: Blob | string) {
   const data = 'data:text/plain;charset=utf-8,' + encodeURIComponent(blob);
   var myWindow = window.open("", '_blank');
   myWindow.document.write(data);
   setTimeout(() => window.URL.revokeObjectURL(data), 100);
}

You will find more details at https://www.w3schools./jsref/met_win_open.asp .

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1744257159a238370.html

javascriptHow to open a string as a HTML content in a new tabStack Overflow

最新回复(0)