必要
元のプロジェクトのエクスポートはバックエンドによって作成されたインターフェイスであり、特定のビジネスページテーブルのコンテンツをフロントエンドからExcelにエクスポートする必要があります。現在のページ以外のすべてのデータをエクスポートする必要があり、他の要件はありません。
インストール
cnpm install xlsx --save-dev
cnpm install file-saver --save-dev
devは、必要に応じて追加されるか、追加されません。
使用する
ポップアップウィンドウページは上記のようにページングされますが、Excelをエクスポートするにはすべてのデータが必要なので、エクスポート用に別
opacityの値0を書き込みel-tableます。
// .vue
// template
<el-table id="out-table" border :data="Pollutantlist" style="opacity:0;">
<el-table-column
v-for="coll in column"
:key="coll.value"
:label="coll.label"
align="center"
:prop="coll.value"
:min-width="coll.width"
>
<template slot-scope="scope">
...
</template>
</el-table-column>
</el-table>
Pollutatlist为全部数据。（ps:由于涉及到接口数据的行转列，所以才有column的循环，这点可以忽略。)
// script
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
// script (method)
handleExport(){//导出按钮
/* 从表生成工作簿对象 */
var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
/* 获取二进制字符串作为输出 */
var wbout = XLSXD.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array',
cellStyles: true,
})
try {
FileSaver.saveAs(
// Blob 对象表示一个不可变、原始数据的类文件对象。
// Blob 表示的不一定是JavaScript原生格式的数据。
// File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
// 返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
new Blob([wbout], { type: 'application/octet-stream' }),
// 设置导出文件名称
'xxxx数据.xlsx'
)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout
}
复制代码以上...
このように、スタイルはエクスポート後にxlsxによってデフォルト設定されるため、プロジェクトのバックエンドインターフェイスによってエクスポートされたExcelの結果と一貫性を保つために、小さなスタイルを追加する必要があります。ここでは、プロジェクトの状況に応じて、以下を設定する必要があります。
- ヘッダーの背景色とヘッダーテキストの色。
要件は次のとおりです。次のようにしないでください
。2。境界線を設定します。3。
フォント
を設定します。4。列幅を設定します。
スタイルを追加
cnpm install xlsx-style --save-dev
//vue.config.js
module.export = {
...
configureWebpack:{
externals:{
'./cptable': 'var cptable'
},
}
...
}
复制代码ここで構成する必要があります。構成しないと、エラーが報告されます。ソースコードの処理も変更できます。当社は関係者が多く、同じ場所で働いていないため、ソースコードを変更することはありません。さらに、jsを調整します。
// script
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import XLSXD from 'xlsx-style' // 新增
// script (method)
1. handleExport(){
2. var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
3. let blocks = wb.Sheets[wb.SheetNames[0]];//注释一
4. Object.keys(blocks).map((str)=>{
5. let res = str.match(/^[A-Z]+1$/g);//注释二
6. let cell = blocks[str];
7. if(res){
8. blocks['!cols'].push({wpx:cell.v.length*20+8});//注释三
9. cell.s = {
10. font: {
11. name: 'Arial',
12. bold: true,
13. color: { rgb:"FFFFFFFF" },
14. sz: 10
15. },
16. fill: { fgcolor:{ rgb:'FF808080'},fgColor:{ rgb:'FF808080'}},
17. alignment: { horizontal:'center' },
18. border: {
19. top: { style: 'thin' },
20. bottom: { style: 'thin' },
21. left: { style: 'thin' },
22. right: { style: 'thin' },
23. }
24. }
25. }else if(str.indexOf('!')==-1){// 注释四
26. cell.s = {
27. font: {
28. name: 'Arial',
29. sz: 10
30. },
31. alignment: { horizontal:'center' },
32. border: {
33. top: { style: 'thin' },
34. bottom: { style: 'thin' },
35. left: { style: 'thin' },
36. right: { style: 'thin' },
37. }
38. }
39. }
40. })
41. var wbout = XLSXD.write(wb, {//这里是XLSXD
42. bookType: 'xlsx',
43. bookSST: true,
44. type: 'buffer',//这里是buffer
45. cellStyles: true,
46. })
47. try {
48. FileSaver.saveAs(
49. new Blob([wbout], { type: 'application/octet-stream' }),
50. 'xxxx数据.xlsx'
51. )
52. } catch (e) {
53. if (typeof console !== 'undefined') console.log(e, wbout)
54. }
55. return wbout
56. }
复制代码注1：コードの最初の行の例を
見てみましょう：2wb
その中で、「ワークシート」SheetNamesを表す名前セットはSheets、「ワークシート」の内容の属性セットです。SheetNames.Sheet1以下!colsは、格納された列オブジェクトを!rows表し、格納された行オブジェクトを!ref表し、シート全体の文字列を表します。残りのプロパティはセルを表し、Excelページの左上にあるロケーターに対応します。たとえば、A2は最初の列と2番目の行を意味します。他のいくつかのプロパティはここにあります。
注2：
ヘッダーのスタイルを設定するには、ルールに従ってヘッダーを一致させ、SheetNames.Sheet1ヘッダーに1つのスタイルを設定し、ヘッダーではない他のセルに別のスタイルを設定します。スタイルは、の下のプロパティオブジェクトの下にSheetNames.Sheet1マウントされます。たとえば、A1オブジェクトは、セルの内容（t）が文字列であり、表示値（v）がモザイクであることを示します。
v：セルの値
t：セルのタイプ'b'ブール値、'n'数値、'e'エラー、's'文字列、'd'日付
s：セルのスタイル
注3：
列幅を設定し、一時的に列幅を文字列の長さ*20ピクセルに設定します。!cols必要な形式は次のとおりです。[{wpx:20},...]
注4：：、、、の下の非
セル属性を削除しますSheetNames.Sheet1!cols!fullref!ref!rows
以上 ！