Angular 5项目HTML转可复制PDF及提交可编辑DIV内容至接口咨询

Hey there! Let's break down your Angular 5 questions with practical, actionable solutions:

Since you need a real text-based PDF (not an image capture), pdfmake combined with html-to-pdfmake is a great fit. This stack converts your HTML content into pdfmake's structured document definition, which generates a fully editable/selectable PDF.

Here's how to set it up:

• First, install the required dependencies:

  npm install pdfmake html-to-pdfmake --save
  

• In your Angular component, import the modules and write the conversion logic:

  import pdfMake from 'pdfmake/build/pdfmake';
  import pdfFonts from 'pdfmake/build/vfs_fonts';
  import htmlToPdfmake from 'html-to-pdfmake';
  
  // Initialize pdfmake's default fonts
  pdfMake.vfs = pdfFonts.pdfMake.vfs;
  
  export class YourComponent {
    generatePdf() {
      // Target the HTML element you want to convert (use ViewChild or getElementById)
      const targetElement = document.getElementById('pdf-content');
      const rawHtml = targetElement.innerHTML;
  
      // Convert HTML to pdfmake's compatible format
      const pdfReadyContent = htmlToPdfmake(rawHtml);
  
      // Define your PDF structure (customize fonts, margins, etc. here)
      const docDefinition = {
        content: pdfReadyContent,
        defaultStyle: {
          font: 'Helvetica'
        }
      };
  
      // Generate and download the PDF
      pdfMake.createPdf(docDefinition).download('your-document.pdf');
    }
  }
  

• Key advantage: This approach builds the PDF from structured text content, not a rasterized image—so users can select, copy, and search the text just like a native PDF.

For a contenteditable div with user-filled values, you just need to capture its full inner HTML and send it via Angular's HttpClient. Here's a straightforward implementation:

1. Add a template reference to your editable div in your component's template:

   <div #editableDiv contenteditable="true" class="editable-container">
     <!-- User will input/edit content here -->
   </div>
   <button (click)="submitHtmlToBackend()">Send to Server</button>
   

2. Capture the HTML and send the request in your component class:

   import { Component, ViewChild, ElementRef } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   export class YourComponent {
     @ViewChild('editableDiv') editableDiv: ElementRef;
   
     constructor(private http: HttpClient) {}
   
     submitHtmlToBackend() {
       // Get the full inner HTML of the editable div
       const divHtml = this.editableDiv.nativeElement.innerHTML;
   
       // Prepare the payload to match your backend's expected format
       const requestBody = {
         content: divHtml
       };
   
       // Send POST request to your backend endpoint
       this.http.post('https://your-backend-api.com/submit-html', requestBody)
         .subscribe({
           next: (res) => {
             console.log('HTML submitted successfully!', res);
             // Add success handling (e.g., show a toast notification)
           },
           error: (err) => {
             console.error('Failed to submit HTML:', err);
             // Add error handling (e.g., display an error message)
           }
         });
     }
   }
   

• Quick reminders:
  • Make sure HttpClientModule is imported in your app module to use HttpClient.
  • Watch out for XSS risks: If your backend will render this HTML later, ensure it sanitizes the input to block malicious scripts. You can use Angular's DomSanitizer on the frontend if needed, but be careful not to strip valid user content.

内容的提问来源于stack exchange，提问作者The Mechanic