ruby-on-rails - 从 rails 到 Angular 处理 .docx 模板时遇到问题

Answer 1

这是我将文件从 Angular 发送到 rails 服务器的代码：

    **component.ts**

    upload(event: any) 
      {
        const file = this.fileInput.nativeElement.files[0];

        this.reportService.uploadfile(file, this.report.id, this.user.clinic.id).subscribe( res => {
          },error => {
            this.flashMessagesService.show('Error uploading the template. ', { classes: ['alert', 'alert-danger'], timeout: 5000 })
          })
        this.download_report(this.user.clinic.id, this.report.id);
      }
    **service.ts**
      public uploadfile(file : File,report_id: number, clinic_id: number): Observable<Response> 
      {
        const formData = new FormData();
        formData.append("report_id", report_id.toString());
        formData.append("clinic_id", clinic_id.toString());
        formData.append("report", file);
        let headers = this._tokenService.currentAuthHeaders;
        headers.delete('Content-Type');
        let options = new RequestOptions({ headers: headers });
        return this._tokenService.request({
          method: 'post',
          url: environment.api_base + `/reports/uploadfile`,
          body: formData,
          headers: options.headers
        })
      }

这是我将文件从 Angular 接收到 rails 服务器的代码：

      # POST /reports/uploadfile/
      def uploadfile
        url = "#{Rails.root}/reports/" + params[:clinic_id] + "/template/" + params[:report_id]
        dir = File.dirname("#{Rails.root}/reports/" + params[:clinic_id] + "/template/" + params[:report_id])
        FileUtils.mkdir_p(dir) unless File.directory?(dir)
        File.open(url, 'w+') do |f|
          f.write(params[:report].read.force_encoding('utf-8'))
        end
      end

这是我从 Rails 接收文件到 Angular 的代码：

        **component.ts**
    download_report(clinic_id: number ,report_id: number) 
      {
        this.reportService.downloadfile(clinic_id, report_id).subscribe( res => {
 var JSZip = require('jszip'); 
 var Docxtemplater = require('docxtemplater');
 var file = new File([res],'report.doc',{type:'application/msword'});
 let reader = new FileReader();
 reader.readAsArrayBuffer(file);
 reader.onload = () => {
  this.doc = {
    filename: file.name,
    filetype: file.type,
    //To encode base64 (.docx does not work)
     value: reader.result
  };

  var zip = new JSZip(this.doc.value);
  var doc = new Docxtemplater();
  doc.loadZip(zip);
  doc.setData({
    nombre: 'John'
    });
  try 
  {
    doc.render()
  }
  catch (error) 
  {
    var e = { message: error.message, name: error.name, stack: error.stack, properties: error.properties}
    throw error;
  }

  var buf = doc.getZip().generate({type: 'nodebuffer'});
  var out = doc.getZip().generate({ type:"blob", mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"}); //Output the document using Data-URI
  saveAs(out,"output.docx");
 }

},error => {
    this.flashMessagesService.show('Error downloading the report. ', { classes: ['alert', 'alert-danger'], timeout: 5000 })
})
      }


        **service.ts**
         public downloadfile(clinic_id: number,report_id: number ): any 
      {
           let params = {clinic_id: clinic_id, report_id: report_id}
return this._tokenService.get('reports/downloadfile', {params: params, responseType: ResponseContentType.Blob}).map(
  (res) => { return new Blob([res.blob()], { type: 'application/msword' })})

       }

这是我将文件从 Rails 发送到 Angular 的代码：

      # GET /reports/downloadfile/
      def downloadfile
        @url = "#{Rails.root}/reports/" + params[:clinic_id] + "/template/" + params[:report_id]
        send_file(@url,:filename => "report.doc", :type => 'application/msword')
      end