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

随着Odoo在各个行业领域的深入应用，对Odoo的前端交互体验要求也越来越高。

我们在项目开发中常常会遇到，需要上传文件并预览的问题。

这里是我遇到的需求，并完成的一个小demo。

在Odoo中实现文件上传 

首先我们需要在qweb页面中加入上传的xml

<div style="width: 1200px; margin-top:10px;margin-right: 52px; display: flex; height: 28px; line-height: 28px">
<!-- 展示已选文件的位置-->
    <span style="width:70px;font-weight:bold;">附件 </span>
    <div class="uploader_file_box">
 
    </div>
<!-- 上传部分-->
    <div class="uploader_input">
        <label class="fa fa-plus btn btn-white-up" style="font-weight:bold;" for="fileinput"> 选择上传附件</label>
        <input id="fileinput" class="uploader-file-input" type="file" multiple="multiple" value="Select Files"></input>
    </div>
 
</div>

#  css部分 

/*上传文件按钮*/
.uploader_input{
    width: 120px;
 
}
.uploader-file-input{
    display: none;
}
/*上传文件展示位置*/
.uploader_file_box{
    display: flex;
}
.uploader__file-list__item{
    padding:0 1rem;
    display: flex;
    background-color: #dfdfdf;
    margin-right: 10px;
}
.btn-white-up{
    background-color: #fff;
    border: 1px dashed #cccccc ;
}
.uploader__file-list__text{
     max-width: 100px;
    padding-right: 10px;
     display: inline-block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
.uploader__file-list__text:hover{
    color: #478aee;
}
.js-upload-remove-button{
    cursor: pointer;

在完成css部分后，我们在项目的页面上会得到一个这样的上传组件 ⬇ 

#  js部分上传的事件及监听

点击选择上传附件后，会调用默认的input的上传功能，并给输入框监听change事件，拿到上传的文件。

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

#  开始上传文件start 

//当前页面全局定义的
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 <upfileList.length; 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 = $('+fileName+'">'+ '+filesdow+'" download="'+fileName+'" target="view_window">'+fileName+'' +'');//文件名称
    fileState.fileListIndex++;
    //创建一个放入的
    var listItem = $('
+ fileId + '">
');//文件展示的每一条的盒子