Odoo丨PDF、Word、Excel文件前端预览实操干货都在这！

this.$buttons.find('#fileinput').on('change', this.proxy("selectFile")) //读取上传的文件

//当前页面全局定义的var fileOption={ fileTypeWhiteList: [ 'ppt','pptx', 'xls','xlsx','pdf','doc','docx'],//校验的格式}var fileState = { fileBatch:[], fileListIndex:0}var upfilelength=0;  //文件上传 start// 获取文件selectFile:function (e){ e.preventDefault(); e.stopPropagation(); //这里可以加一个校验 var files = e.target.files || e.dataTransfer.files || e.dataTransfer.getData; for (var i = 0; i < files.length; i++) { Self.addfile(files[i]); } },//上传文件addfile:function (file){ let self = this; var fileSize = file.size; //判断文件大小 if( parseInt(fileSize/1024/1024)>=20){ this.displayNotification({ title: "系统提示", message: '单个文件上传不能超过20MB', type: 'danger', sticky: false }); return } var upfiles = file; if (fileOption.fileTypeWhiteList.indexOf((this.getExtension(file.name)).toLowerCase()) !== -1) { framework.blockUI()//调用loading.... //调用接口并在上次完成后调用查询接口查询到上传了的文件 self.getUpdataList(); }) } else { // 不在提示文件不可上传 let mesg = '不支持该格式的文件,请上传以下格式的文件ppt,pptx,xls,xlsx,pdf,doc,docx;' Self.displayNotification({ title: "系统提示", message: mesg, type: 'danger', sticky: false }); return }  },//反显上传的数据//我这里是调用接口去查询上传后的数据getUpdataList:function (){ let self = this; //先清除后加 $('#fileinput').val(''); $('.uploader_file_box').children().remove(); this._rpc({ route: 'xxxxxxx', params:{ xxxx:xxxxx, } }).then(res=>{ var upfileList = res.data; if(upfileList.length>0){ approveFileFlag = false; upfilelength = upfileList.length; for (let i = 0; i ;> let fileItem = upfileList[i]; self.files_show(fileItem) } }else{ approveFileFlag = true; $('.uploader_file_box').children().remove(); } console.log(res,'已上传的文件') })},//页面渲染上传的文件展示js创建以上传的文件files_show:function (file){ var fileName = file.name; var fileId = file.id; var filesdow = file.local_url var fileNameWrapper = $(''">'+ ''" download="'+fileName+'" target="view_window">'+fileName+'' +'');//文件名称 fileState.fileListIndex++; //创建一个放入的 var listItem = $('
'">
');//文件展示的每一条的盒子 var removeLink = $('
                                                '">'); fileState.fileBatch.push({filesdow: filesdow, id: fileId, fileName: fileName,});//保存文件 //校验是否需要删除，校验部分，根据自己的需求，自己去调整 if(quot_status==0&&(!approve_type)){ listItem.append(fileNameWrapper).append(removeLink); }else { listItem.append(fileNameWrapper);  } $('.uploader_file_box').append(listItem); this.bindEvents();},//挂载事件的方法因为解决查询多次已上传文件时删除文件事件的触发问题bindEvents:function (){ //先集体移然后集体添加 $('.js-upload-remove-button').unbind("click"); //在集体添加事件 $('.js-upload-remove-button').on('click',this.removeItemHandler); },//删除已上传的文件，待确认removeItemHandler:function (e){ let self = this; e.preventDefault(); var removeIndex = $(e.target).data('index'); Dialog.confirm(self, '确定删除？', { title: '提示', confirm_callback: function () { Self.removeItem(removeIndex); $(e.target).parent().parent().remove(); }, }) },//删除上传的数据removeItem(id){ let self = this; let removId = id; this._rpc({ route: '/xxxx/xxxxdel', params:{ xxxid：xxxx } }).then(res=>{ self.displayNotification({ title: "系统提示", message: res['msg'], type: 'success', sticky: false }); self.getUpdataList();//删了后要查询并反显数据 }) //这部分是做多数据一次上传需要我这边没用到 for (var i = 0; i < fileState.fileBatch.length; i++) { if (fileState.fileBatch[i].id === parseInt(id)) { fileState.fileBatch.splice(i, 1); break; } }},//规则校验getExtension:function(path){ var basename = path.split(/[\\/]/).pop(); var pos = basename.lastIndexOf('.');  if (basename === '' || pos < 1) { return ''; } return basename.slice(pos + 1);},//文件上传end

"stylesheet" href="/quotation/static/src/js/include/pdf/pdf.viewer.css"/>>
>
>
"stylesheet" href="/quotation/static/src/js/include/SheetJS/handsontable.full.min.css"/> src="/quotation/static/src/js/include/SheetJS/handsontable.full.min.js">
 src="/quotation/static/src/js/include/SheetJS/xlsx.full.min.js">
"stylesheet" href="/quotation/static/src/js/include/verySimpleImageViewer/css/jquery.verySimpleImageViewer.css"/> src="/quotation/static/src/js/include/verySimpleImageViewer/js/jquery.verySimpleImageViewer.js">
>
"stylesheet" href="/quotation/static/src/js/include/officeToHtml/officeToHtml.css"/>

//挂载事件的方法bindEvents:function (){ //先集体移然后集体添加 $('.js-upload-remove-button').unbind("click"); //在集体添加事件 $('.js-upload-remove-button').on('click',this.removeItemHandler); //添加文件的点击事件 $('.uploader__file-list__text').unbind("click"); $('.uploader__file-list__text').on('click',this.previewsShow)},// 预览previewsShow:function (){ // 点击时先获取是那个文件,并找到对应文件的url地址， var file_path = "path/to/file.pptx";  // 先清除 $('.body').remove('#resolte-contaniner') //在添加，或者可以先写到上面的xml中这样就不需要创建 let previewbox = `