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������������
Asked
Active
Viewed 498 times
0

Tico90
- 3
- 3
1 Answers
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