从同事手里接收的dcat admin项目,客户各种定制功能,网上各种找不到解决办法,气煞我也。
为了给首页加一个导出excel功能,
开始的时候直接这么写:
先定义一个messageExport.blade.php 文件,下面这种写法,js掺杂php,给选项赋值。
var selectView =document.getElementById('select');
let data1 ="
$list = \Illuminate\Support\Facades\DB::table('lala')
->select('id', 'name')
->get()
->toArray();
$str = json_encode($list);
echo str_replace('"', '\"', $str);
?>";
let arr =JSON.parse(data1);
arr.forEach((item, index) => {
selectView[index] =new Option(item.company_name, item.id);
})
导出功能同样js,用ajax调用接口获取数据,前端导出excel。(本来想用laravel的excel导出的,安装了一整天,没成功,mac本地没安装成功,去服务端尝试,还是不成功,崩溃了。安装非常多的依赖,各种出问题,气煞我也。)
//使用
public function index(Content $content)
{
return $content
->header('首页')
->body(function (Row $row) {
$row->column(12, function (Column $column) {
........
$column->row(function (Row $row){
$row->column(12,view('messageExport')->render(););
});
});
出现一个问题,第一次加载可以,从其他界面返回就出问题,不显示界面其他元素了,浪费时间好久没解决。只能照着官方的写法,重新写。
创建文件 /Metrics/Examples/MessageExport.php
namespace App\Admin\Metrics\Examples;
use Illuminate\Contracts\Support\Renderable;
use Dcat\Admin\Admin;
use Illuminate\Support\Facades\DB;
class MessageExport implements Renderable
{
// 定义页面所需的静态资源,这里会按需加载
public static $js = [
// js脚本不能直接包含初始化操作,否则页面刷新后无效
//用于导出excel的js
"https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js",
"https://cdn.bootcss.com/xlsx/0.11.3/xlsx.full.min.js"
];
//一直没搞明白,这个本地css的路径怎么搞,路径一直不正确,气煞我也。最后把css样式直接放.blade.php里面了。
public static $css = [
];
//传过来一个参数,用作选择框选项
public function script($optionStr)
{
return <<
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i !== s.length; ++i) {
view[i] = s.charCodeAt(i) & 0xFF;
};
return buf;
}
//用这种方式给按钮加事件。直接onclick定义一个方法,找不到,气煞我也。
$('.export-btn').on('click', function () {
let start_time = document.getElementById('start-time').value;
let end_time = document.getElementById('end-time').value;
let select_comid = document.getElementById('select').value;
let type = document.getElementById('type-select').value;
// //网络请求
$.ajax({
type:"post",
url:"xxx",
data:{},
async:true,
success:(resp=>{
let excelData= [];
let headerData= ['a','b','c','d','e','f','d'];//excel表头
excelData.push(headerData);
resp.data.forEach(item=>{
let arr= [];
arr.push(item.a);
arr.push(item.b);
......
excelData.push(arr);
});
let wopts = { bookType:'xlsx', type:'binary' };
let fileName = "信息记录.xlsx";
const ws = XLSX.utils.aoa_to_sheet(excelData);
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
const wbout = XLSX.write(wb, wopts);
saveAs(new Blob([s2ab(wbout)]), fileName); // 保存为文件
}),error:(err=>{
console.log(err);
})
});
});
var selectView = document.getElementById('select');
//这里不加引号,也报错。。。气煞我也
let arr = JSON.parse("$optionStr");
arr.forEach((item, index) => {
selectView[index] = new Option(item.company_name, item.id);
})
JS;
}
public function render()
{
// 在这里可以引入你的js或css文件
Admin::js(static::$js);
Admin::css(static::$css);
// 需要在页面执行的JS代码
// 通过 Admin::script 设置的JS代码会自动在所有JS脚本都加载完毕后执行
$list = \Illuminate\Support\Facades\DB::table('xx')
->select('xx', 'xx')
->get()
->toArray();
$str = json_encode($list);
$str = str_replace('"', '\"', $str);
//把数据库获取的选项传给界面的js
Admin::script($this->script($str));
//需要定义一个ExportExcel.blade.php文件,里面写div,style等,不再赘述。
return view('ExportExcel')->render();
}
}