麻烦处理.docx模板从rails到Angular

时间:2018-02-20 13:35:28

标签: ruby-on-rails angular jszip docxtemplater

  1. 我是角度4的新手,我需要发送一个.docx模板文件 Angular(前端)到rails(后端),然后在用户需要时 下载.docx模板并使用docxtemplater进行处理

    这是我将文件从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 zip = new JSZip();
          zip.file('file.docx',res['_body'],{binary: true});
          var doc = new Docxtemplater();
          doc.loadZip(zip);
    
          },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});
    
       }
    

    这是我将文件从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
    

    文件在保存在rails服务器中后发送正常 磁盘,使用编辑器打开文件,一切都很好, 然后当文件下载并使用时保存在磁盘中 saveAs(),docx打开正常,意味着文件是 收到罚款。但如果在保存文件之前我尝试处理它 使用docxtemplater会在函数内引发以下错误 doc.loadZip(拉链);:

     core.es5.js:1084 ERROR XTInternalError {name: "InternalError", properties: {…}, message: "The filetype for this file could not be
    

    确定,此文件是否已损坏?“,stack:”错误:文件类型 对于这个文件不可能 IDE ...(http://localhost:4200/vendor.bundle.js:61365:26)“}

    rails服务器的响应是:

    _body
    :
    "��ࡱ�;��  F���������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������� ↵����
     !"#$%&'()*+,-./0123456789:;<=>?@ABCDE����G������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������Root
    

    条目 ↵      !“#$%&安培;'() +, - / 012345789:; = ↵ ↵ Ficrosoft Word-Dokument↵MSWordDocWord.Document.8 9 q%↵[d dNormal$ a $ 1 $ $ A $ 3B OJQJCJmH sH KHPJnHtH ^JaJ_H9. 。 WW8Num1z0OJQJ ^ J“ ”WW8Num2z0“ ”WW8Num2z1“ !” WW8Num2z2“ 1”WW8Num2z3“ A”WW8Num2z4“ Q”WW8Num2z5“ a”WW8Num2z6“ q”WW8Num2z7“WW”WW8Num2z8B BAbsatz-StandardschriftartH HWW-Absatz-StandardschriftartJJWW-Absatz-Standardschriftart1LLWW-Absatz-Standardschriftart11..BulletsOJQJPJ ^ JFFHeading      x$ OJ QJ CJPJ ^JaJ.B 。 TextBody↵ x/ List ^J↵@“@ Caption     ! x x$ CJ6 ^J↵aJ]&amp; “&amp; Index”$ ^J↵4 24表内容#$&gt; 1B&gt;     表格标题$$ a $$ 5 l ,b $2 F'3TQ g2@ 2 ( ↵ ↵ ↵ N A? C“ &lt;↵ C &amp; TPG Times 新Roman5 Symbol3&amp; Ariali LiberationSerifTimesNew Romani LiberationSerifTimesNew Roman? DejaVuSans? Lohit Hindi5 Symbol_ OpenSymbolArialUnicodeMSS&amp; Liberation SansArial? LohitHindiB hH Grbg ' ...¯〜A〜ö|〜I&GT;ޟ~~ _7 {U3 | Z7 {〜I&LT;!V {!8OO /͗³wgh/ LYB(uB_2GVC}GƯ0| { W] ++䳽| 7_MIGN5n0n &LT; /&gt;有QCÿWao〜WW [oǿֿ733 ON {{ 1}}}} UEK E:纳瓦森4k8Lix �XC�]?����Ư�$������l�������i���O����/>�����.��k>�����/Ľ���7�/>�^��˟�����~Z��|�}������͟��-�z_F^Zt�0d8hk�]%WK&����Քa/�~��K��E߷7TX2 �ߴ袥�Χ����)�Ԣ��P�a��hqH�ҢN��b���E��j���d�ZtȰ�Pa�:ԥE��↵�ߒyh����a����MZ�>*ÐajѦE�}S[��Ya�o?F/Z��0WC���C�Y|�n2L-ڴ�3��f�g�ᠭu��ߴ�;3�jh�e Ðaj�b���Ӿ--�|N��dZ�i�-��t�v؇j�H�T2ɥԷ�HӢM�>��-���ߔaj�灐�����C�%���M�>kk��d�aȰ7�9Z��0WC�!�>�:e��>�+��ah�EK7�d�:lSZ��0WC��E�c�0�m�����20�)�Pm����X�%���M�Ǧ�oZ���o�0���@�����@��Ih��E�s5d�Z���V}��6�$�WR2I-����-�~Ӣ-l�&WC�/�S�ÕT��mi��sB�%���M�6-����iQ'�\ �mZt�ܸ߾���,znS2Y�a�)�Ԣ�{K�6-�M�~ӢEZt��ߔah��E��0$9Z�i�"�d�:lSZ�i��� ����o�3a�Q�K}����-Ӂ���R_�~:z3u:N VyVo + GI4ծ吨܆} RjiuHO6Np     y &lt; O X عجم J KaW ' &gt;L 9gHV | W 3G &lt;      o m Xl_g y 'g P {ːW ~ j |oX #n xd t &GT; zi1y,     〜@ :: I:Y + JSTC} ^ U,ІaW} WSK} ^&GT !;ֽVI] @}&GT; UA,|つ /} 4Ua8h'产品:&gt;OCҷ产品:&gt; OCXu_Rc {50Ûu} mZgVy“Wn的EihjxqI}އ:Y0 [ULܻZZ9ϫðj{ ɽ(.7UQ&GT;,I; vZGiw} ^ WB + f6my VE] UY     } CE     fvԢφlKK;毫安[S     90dX L ^ KV3 =hӢ - “&安培; 9Zه9ý” L * 6exRh F; hk333 ^ In0MmZY [X6 |升ش〜ӢMfGeRy)TIU3uWao M-MZL'} hn2WS&GT; SER一个:Ða0TKWctזVBK&GT ;? dڰDC))R GT;ù}Š U6!CҷL,9Z \     炒&安培;!?A-3↵HTyoFwmiŐ6a޶iѦOE] N [=了Dj jjSʫgm,RnScZԅmZ¾v4-LôZMKC_H-ڴ F *&LT; :�:� ��<���|��I��_����������b�����(Vyi���s���p3/��a�}��_��,�І�@�R_��I��s��U�E��U�EXա���<�tܮLO.�ɴ�ܛ����|��<L�i�*�"�a�jK�R_���tr:���~i5u�C�EX�iH�l�2X��<�u��c}>,�}��|��Ӻ7磞�a�O�(Vy� ��a���2$�]!�>ٯ��~��!�:�U�E��U�EXա���<��j��w|B�����0�gL� ����G��U��T�~��d��틽ai��yԫ|(����޽��Q��a�;y�_��ě,�~��jW��t״ι��>9S�j�ko���� �5�1�}R��+����1ӫ0���y�'���'��U>�w~�x��C��{_<jhý���wm'�*����t��:T{o���@NN��a�L�a˽�ʽ��r���6�L�}�ts��U��6�}��Խ}>$�~H�pul8��/ c�N��}>���Uݫ|50X�ߛ�{7���@�ìo��jWy:���_�����t~:|o��7O���� ����7�[Vu�>�ծ��'{g�V'�� �Wý��{��+Ǿ����^���.�A�Y��M�xSIaZ�a���>9S�jO�T�E���� ��A[��j��O2Y�Rm�ʳH�����gmam:3��~W^�I�ì�dPyiߖJ�HC{�v҃��|�y�2����ːT�]yyxc��χ�j�y�$�Է�TSI�d=�<�t3OC{ 'W��K7�>}>�<m/�R%Y�>T�EʥTI� ����I����J�.���U�ηg�mi�Ő��~���bH�vo*ɢ�jjQ'�~i���,���0�\ �і]��|�K��,R�*�"�R�$�t���Ő��6޴�2�'e�]�頍zX-��0V�>/�d��v�j*�"���g�n�o�V��gV77;~����U�!�v���X�d�.K��d�Z4KC�jƢ.-����a��ݳ�U_;�ս����}6}íޅC�듪��R�gC��6�Yա���!�v���i7�������{�t�WL�L�/��y�'���'{C��R���y��n>Đ��N����x�ͼ<�����������0��{C^�*O���r�x�V���Z?������al���!a��f��x��>Y�iu�*O}��>I_�Ӑ|�!�]��0,�o��U^j c.2Uy癣xoBYug〜X�6�hӢ�'�}�Iȶ7�5Vy&!����~)��3 پ�7��x���~˷;���ާ�.��t=�{ ���~�yν���wz齍����F3|���Oy�7�O�]���z��6z/��?�{k�Mo��{? /?�[����)-�����>�wy˧�+�T�--����ݻ�oz�����Ix!�1�jW�\�Wp�^ ��{%W�� ?��^��W�x.n����W�V�����^ ����Y�w�u�Y����h�gm��!�Ԣ��P�a��hqH�����n*�" m��?d]a�o?F/Zt�0�M} ��R�)����y���>���>����0ͧ�j �q�Ӫ��p&�V5�K��0\�W{o^ؘ�>)�ޕa���������>�/p5�N^��� �2$�n��d��'��(�g��݇�ECr܆��A>�<���>�/p5�����e�*�{根 Entry F CompObj jOle↵ 1Table SummaryInformation( 6DWordDocument uObjectPoolDocumentSummaryInformation8

1 个答案:

答案 0 :(得分:0)

这是我将文件从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