我是角度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Ő6aiѦ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
答案 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