Changing a DOM structure into pure HTML using JavaScript

Question

Changing a DOM structure into pure HTML using JavaScript

Looking to convert some HTML into a PDF file using a service that requires form-data as the payload.

Is there a way to extract HTML from the DOM and save it as a file for use in the payload?

<p>some other HTML</p>
    <div id="content">
      some content
    </div>

    const html = document.getElementById('content').innerHTML;

    const builder = new Blob([html], {type: 'text/html'});

Encountering an issue that states: The format of the request must be of multipart/form-data type.

javascript form-data

Answer 1

Answer №1

To adjust the CSS style, you will need to make the changes manually.

      function downloadPDF(){
            var printContents = document.getElementById('content').innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
        }
    
        function redirect() {
            window.location.href = "/user-landing-page";
    
        }

Answer 2

To adjust the CSS style, you will need to make the changes manually.

      function downloadPDF(){
            var printContents = document.getElementById('content').innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            window.print();
            document.body.innerHTML = originalContents;
        }
    
        function redirect() {
            window.location.href = "/user-landing-page";
    
        }

Answer 3

Answer №2

After some troubleshooting, I managed to get it to work. Here is the solution I came up with - Please note that this code is specific to Angular 8, although it closely resembles vanilla JavaScript

const formData = new FormData();
const html = this.myInput.nativeElement.innerHTML;
const htmlWithDoc = '<!DOCTYPE html><html lang="en"><head><title>Document</title></head><body>' + style + html + '</body></html>';

formData.append('blob', new Blob([htmlWithDoc], {type: 'text/html'}));

this._dataService.htmlToPdf(formData).subscribe(response => {
  this.saveToFileSystem(response);
});

private saveToFileSystem(response) {
 const filename = 'test'; // parts[1].split('=')[1];
 const blob = new Blob([response], { type: 'application/pdf' });
 saveAs(blob, filename);
}

htmlToPdf(payload) {
    const location = 'my API';
    return this._http.post(
      location,
      payload,
      {responseType: 'blob'}
      ).pipe(res => res);
  }

Answer 4

After some troubleshooting, I managed to get it to work. Here is the solution I came up with - Please note that this code is specific to Angular 8, although it closely resembles vanilla JavaScript

const formData = new FormData();
const html = this.myInput.nativeElement.innerHTML;
const htmlWithDoc = '<!DOCTYPE html><html lang="en"><head><title>Document</title></head><body>' + style + html + '</body></html>';

formData.append('blob', new Blob([htmlWithDoc], {type: 'text/html'}));

this._dataService.htmlToPdf(formData).subscribe(response => {
  this.saveToFileSystem(response);
});

private saveToFileSystem(response) {
 const filename = 'test'; // parts[1].split('=')[1];
 const blob = new Blob([response], { type: 'application/pdf' });
 saveAs(blob, filename);
}

htmlToPdf(payload) {
    const location = 'my API';
    return this._http.post(
      location,
      payload,
      {responseType: 'blob'}
      ).pipe(res => res);
  }

Changing a DOM structure into pure HTML using JavaScript

Answer №1

Answer №2

Similar questions

Encountered a runtime error while trying to insert a list item <li> into a paragraph <p> element

Is there a way to change an ISO 8601 date into the format '/Date(1525687010053)/' using JavaScript?

I'm encountering issues with this code for a dice game. It's strange that whenever I click the roll dice button, it disappears. Additionally, linking an .css sheet seems to cause the entire page to

Ways in which the user can modify the city name within this inquiry

Switch back and forth between adding and removing a table row using jQuery

What is the process of incorporating a lowercase normalizer into an Elasticsearch mapping object?

Can we stub these types of functions in any manner?

What is the process for assigning a background color to a specific option?

Implement Material-UI Higher Order Components in a Class-based Component

After generating the token, where is the appropriate place to define the authorization header?

The function Sync in the cp method of fs.default is not a valid function

JavaScript unable to access elements during page loading

What are the drawbacks of using JavaScript to load a series of images?

Accessing a template object in JavaScript using querySelector

No files located by the server

What is causing my array of objects to constantly accumulate undefined elements?

Using jQuery to Toggle the Height of Multiple Sections with a Single Function

Using AJAX to populate a dropdown menu in a CodeIgniter application

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

Organizing a Vue.js SPA project: Implementing Vuex store and API calls efficiently