0
  1. I am new on angular 4, I need to send a .docx template file from Angular(frontend) to rails(backend), and then when the user requires download the .docx template and processing using docxtemplater

    Here is my code to send the file from Angular to rails server:

    **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
        })
      }
    

    Here is my code to receive the file from Angular into rails server:

      # 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
    

    Here is my code to receive the file from rails to 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});
    
       }
    

    Here is my code to send the file from rails to 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
    

    The file was send fine, after being saved in the rails server in the disk, the file was opened using an editor and everything looks fine, then when the file was downloaded and was saved in the disk using saveAs(), the docx is opened fine that means that the file is received fine. But if before to save the file I try to process it with docxtemplater throws the following error inside the function doc.loadZip(zip);:

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

    identified, is this file corrupted ?", stack: "Error: The filetype for this file could not be ide…(http://localhost:4200/vendor.bundle.js:61365:26)"}

    The response fron the rails server is :

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

    Entry������������������������������������������������������������������������ ↵ !"#$%&'()+,-./012345����789:;����=������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������↵���� �FMicrosoft Word-Dokument↵MSWordDocWord.Document.8�9�q%↵[d��dNormal$a$1$$A$3BOJQJCJmH sH KHPJnHtH^JaJ_H9.����. WW8Num1z0OJQJ^J"���" WW8Num2z0"���" WW8Num2z1"���!" WW8Num2z2"���1" WW8Num2z3"���A" WW8Num2z4"���Q" WW8Num2z5"���a" WW8Num2z6"���q" WW8Num2z7"����" WW8Num2z8B����BAbsatz-StandardschriftartH����HWW-Absatz-StandardschriftartJ����JWW-Absatz-Standardschriftart1L����LWW-Absatz-Standardschriftart11.����.BulletsOJQJPJ^JF��FHeading ���x$OJ QJ CJPJ^JaJ.B�. Text Body↵��x /� List ^J↵@"@Caption !�x�x$CJ6^J↵aJ]&�"&Index"$^J↵4�24Table Contents#$>�1B> Table Heading$$a$$5\�����l��,b�$2��F'3TQ�g2@���2����( �������↵���↵�↵��N����A?���������C"��������<↵�C����� �&�TPG�Times New Roman5�Symbol3&�Ariali�Liberation SerifTimes New Romani��Liberation SerifTimes New Roman?��DejaVu Sans?��Lohit Hindi5�Symbol_��OpenSymbolArial Unicode MSS&��Liberation SansArial?��Lohit HindiB��hH�Grbg��' …¯�~�A~�o|�~�I>�ޟ�~~�͗�_�7{Ư3�����|Z7��{!���~�I<�V��{8�OO��/͗³�wgh���/�!�Ľ�����yb��(uB_�2�GV��C�}��G�Ư�0���|�{�w�]��+��+�䳽|7���_�M�I��GN����5�����n�0���n��������<�/>Q��̯���c?�ÿ�W��ao�~��W�w��[oǿ�ֿ�7��3�3O���N�?�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_�~��}��U�E�����K}�E:n�W森���4�k8L�i��x:�:� ��<���|��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:�z�3u:N��Vy�Vo�+g���î4�ծ�t܆}RjiuH�O�6N�p�� y��<�O������X�ﵵ�J�KaW�'��>L��9gHV�|� ��W��3G�<� ����o��m���Xl_g����y��'g�P�{ːW�������~ �j�|oX�ۏ#n�χd���t���>�z��i�1�y, �~��@:�:�i������:�y+���j��S��tc�}^u��,�ІaW�}��wsK���}^�>�ֽ!�v�����͙�i�]�@�}>����ua������,��|��zu�/}����4�U�a8h��'�:�>OCҷ�:�>OCXu_�����R�c{50��Ûu}��m�ZgVy�����"��Wn�E�ih�j�x�q�I���!}އ�:�y�0�[����U����L�ܻ��ZZ�9���ϫ�ðj�{�ɽ��(�.7�U��Q��>,�I�;���vZG��i���w�}^W��B���+f��6m�y�V����E]�u�Y�� }��C��E� f��v��Ԣφ�lKK;ma[�S����� 9��0dX̢L�^K�V3�=�hӢ-��"����&�9�Z�ه9Y�"��L*�6exR��h��f;hk�33��3��^I�n���0�M�mZ�Y[�X�6|lش~ӢM�fGeRy�)�TI�U�3u��Wa�o���M-�m�Z�l'}h�n2WS�>��S�e��R?�a�:Ða�0�TK�W���ctז�v��bK�>?Dڰ�d�C�)���)R�>�U}s �u�6�!Cҷ��L�������,9Z��\ ��fRy&!�A-���3�↵�H�Ty�o?Fwmi�Ő��6���a�޶�iѦO�����E]��N[�=Dj��j��jS���ʫg�m��,R�nSc�Zԅ����mZ�¾�v4-�LôZ���M���K����C_�H-ڴ����f�*�<���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�*�{c.��2���U�������y�癬�xo��BYu�g�~�wj�ڷG�:d�I°��o���~�Lޛ�aޞ�g�qM��:Ða�:Ðaii�-ܳqhC΄�3�↵�(�$��R�Քm�:�^���3��3�↵��MC���ȅ���I��Y.���|�����\>#��p��o��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�r��ʽ�+�J��+�����?��6.,��IEND�B�Root Entry�������� �F�CompObj����jOle↵��������1Table�������������SummaryInformation(����6DWordDocument���������uObjectPool����������������DocumentSummaryInformation8������������

Tico90
  • 3
  • 3

1 Answers1

0

Here is my code to send the file from Angular to rails server:

    **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
        })
      }

Here is my code to receive the file from Angular into rails server:

      # 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

Here is my code to receive the file from rails to 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' })})

       }

Here is my code to send the file from rails to 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
Tico90
  • 3
  • 3