阅读 83

全网react+飞冰(ice)UI框架 下载excel 和打印实例

在做这两个功能的时候也是找了很多资料,进行很多的尝试,也问了一些朋友,最后在完成,所以在这里记录一下

下载excel

这个下载功能,我采用的是飞冰的一个提示框,然后封装了一个方式,做完之后发现很简单,呵呵

//数据导出
  const dataExport = () =>{
    Dialog.confirm({
      title: '数据导出',
      content: `是否导出巡检记录数据?`,
      messageProps: {
        type: 'warning',
      },
      onOk: () => {
        common.download(`接口+参数`
        ,`下载excel的文件名`)
       },
      onCancel: () => common.MessageNotice('取消数据导出'),
    });
  }
复制代码

download封装方法

//导出文件
common.download=(href,text)=>{
  let link = document.createElement('a')
  link.style.display = 'none'
  link.href = href
  link.setAttribute('download', `${text}.xlsx`)
  document.body.appendChild(link)
  link.click()
  link.remove();
}
复制代码

打印列表

 const print = () => {
    const el = document.getElementById('billDetails');
    const iframe = document.createElement('IFRAME');
    let doc = null;
    iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
    document.body.appendChild(iframe);
    doc = iframe.contentWindow.document;
    doc.write(el.innerHTML);
    doc.close();
    // 获取iframe的焦点,从iframe开始打印
    iframe.contentWindow.focus();
    iframe.contentWindow.print();
    if (navigator.userAgent.indexOf("MSIE") > 0)
    {
        document.body.removeChild(iframe);
    }
   
}
复制代码

el变量 就是你要打印的区域

文章分类
前端
文章标签