如何使用Angular 6将JsPDF导出的PDF文件上传至服务器

我来帮你梳理下在Angular 6里上传PDF到服务器的两种场景——一种是你用jsPDF生成的PDF直接上传，另一种是选择本地PDF文件上传，步骤都很清晰：

当你用jsPDF生成好PDF后，不需要先保存到本地，可以直接把生成的内容转成Blob对象，再通过Angular的HttpClient上传到服务器：

1. 将jsPDF输出转为Blob
   在你生成PDF的代码里，用output('blob')方法获取Blob格式的内容：

   import * as jsPDF from 'jspdf';
   
   // 假设你已经生成了PDF文档
   const doc = new jsPDF();
   doc.text('Hello, World!', 10, 10);
   // 转为Blob
   const pdfBlob = doc.output('blob');
   

2. 创建上传用的FormData
   服务器通常接收multipart/form-data格式的文件上传，所以需要把Blob放进FormData：

   const formData = new FormData();
   // 第一个参数是服务器端接收的字段名，第二个是Blob，第三个是文件名
   formData.append('pdfFile', pdfBlob, 'generated-document.pdf');
   

3. 封装上传服务
   新建一个Angular服务（比如FileUploadService），用HttpClient发送POST请求：

   import { Injectable } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class FileUploadService {
     constructor(private http: HttpClient) {}
   
     uploadPdf(formData: FormData): Observable<any> {
       // 替换成你的服务器上传接口地址
       const uploadUrl = '/api/upload-pdf';
       // 注意：上传FormData时不需要手动设置Content-Type，浏览器会自动处理
       return this.http.post(uploadUrl, formData);
     }
   }
   

4. 在组件中调用上传
   在你的组件里注入服务，调用上传方法并处理结果：

   import { Component } from '@angular/core';
   import { FileUploadService } from './file-upload.service';
   
   @Component({
     selector: 'app-pdf-upload',
     template: '<button (click)="uploadGeneratedPdf()">上传生成的PDF</button>'
   })
   export class PdfUploadComponent {
     constructor(private uploadService: FileUploadService) {}
   
     uploadGeneratedPdf() {
       // 这里复用前面生成pdfBlob和formData的代码
       const doc = new jsPDF();
       doc.text('Hello, World!', 10, 10);
       const pdfBlob = doc.output('blob');
       const formData = new FormData();
       formData.append('pdfFile', pdfBlob, 'generated-document.pdf');
   
       this.uploadService.uploadPdf(formData).subscribe(
         (response) => {
           console.log('上传成功', response);
           // 这里可以添加成功后的提示或逻辑
         },
         (error) => {
           console.error('上传失败', error);
           // 处理错误
         }
       );
     }
   }
   

如果是让用户选择本地的PDF文件上传，步骤类似，只是获取文件的方式不同：

1. 添加文件选择模板
   在组件的模板里添加文件选择框，限制只允许选择PDF：

   <input type="file" accept=".pdf" (change)="onFileSelected($event)">
   <button (click)="uploadSelectedPdf()" [disabled]="!selectedFile">上传选中的PDF</button>
   

2. 组件中获取选中的文件
   在组件类里定义变量保存选中的文件，并处理文件选择事件：

   import { Component } from '@angular/core';
   import { FileUploadService } from './file-upload.service';
   
   @Component({
     selector: 'app-local-pdf-upload',
     templateUrl: './local-pdf-upload.component.html'
   })
   export class LocalPdfUploadComponent {
     selectedFile: File | null = null;
   
     constructor(private uploadService: FileUploadService) {}
   
     onFileSelected(event: Event) {
       const input = event.target as HTMLInputElement;
       if (input.files && input.files.length > 0) {
         this.selectedFile = input.files[0];
       }
     }
   
     uploadSelectedPdf() {
       if (!this.selectedFile) return;
   
       const formData = new FormData();
       formData.append('pdfFile', this.selectedFile, this.selectedFile.name);
   
       this.uploadService.uploadPdf(formData).subscribe(
         (response) => {
           console.log('上传成功', response);
           this.selectedFile = null;
         },
         (error) => {
           console.error('上传失败', error);
         }
       );
     }
   }
   

• 确保你的Angular项目已经导入了HttpClientModule，在AppModule的imports数组里添加：imports: [HttpClientModule]
• 服务器端需要配置接收multipart/form-data类型的请求，比如Node.js可以用multer中间件，Java Spring可以用MultipartFile来接收
• 如果上传大文件，可能需要配置服务器的文件大小限制，同时Angular这边如果需要进度条，可以用HttpClient的reportProgress选项来实现

内容的提问来源于stack exchange，提问作者saravanam cs