Vueの中でどのようにホームページのデータをExcelの方法にエクスポートしますか？
前書き：バックグラウンドの管理をする時、私達はよくウェブページの上のデータをexcelのこのような需要に導出しなければならなくて、真実な企業プロジェクトの中でいくつかの財務諸表、従業員の情報、取引記録、勤務評定カードの記録などの需要に対応して、本文はこれに対して検討します。
最初の補充：ネット上では一部の牛人はすでにこの機能をコンポーネントにパッケージ化しましたが、一人一人のパッケージロジックは多種多様で、コンポーネントの機能も限られています。本当に自分の業務ニーズにぴったり合うとは限らないです。APIを探すのも面倒です。あまり使えない問題があります。どのように自分で関連している機能をカスタマイズして、どのようにExcelのスタイルをカスタマイズして、特にexcelを導出した後にユーザー定義のスタイル、これはいくつかの既存のパッケージの良いコンポーネントでは実現しにくいです。
本論文はExcelの方法の利点をエクスポートします。ウェブページのテーブルはExcelをエクスポートした後のテーブルと完全に独立しています。つまり、Excelをエクスポートした後の内容はウェブページと直接連絡していません。これはデータがExcelにエクスポートされた後、非常に強い注文性があることを意味します。2ブラウザをまたぐことができて互換性があって、甚だしきに至ってはあるEブラウザです。3エクスポートは非常に速いです。
一、足場を使ってVueプロジェクトを作成し、生成したsrcディレクトリの下でexport ToExcel.jsファイル（名前は自分で取ります）を作成し、App.vueの中で快速シミュレーションで表データを作成します。
1、私はここで簡単にウェブページの前のテーブルのデータをシミュレーションします。iviewのテーブルのコンポーネントを使っています。ホームページに展示されているテーブルのコンポーネントはあなたの好きなコンポーネントを使ってもいいです。ここでデモンストレーションをします。私と同じではありません。
二、export ToExcel.jsファイルに入って、業務の論理コードを書き出します。つまり上記の対応するtransformという方法です。
構想を書きます：HTML文字列のつづり合わせの方法を採用して、つづり合わせて一つのテーブルを取り出して、Excelまで表示することができます。言い換えればHTMLの文法を使って書いたテーブルがエクセルに展示されています。スタイルも携帯できます。注意してスティッチングの過程を見てください。つづり合わせて分かりました。90%できます。
三、パッケージ作業が完了しました。もう一度振り返ってみると、2つのステップは自分のパッケージのtranform方法を使って、データ、ファイル名、コールバックだけが必要です。ここで理解してください。
1、ホームページとExcelは完全に分離されています。Excelはあなたのデータの影響だけを受けています。何のデータを送ってきたかは最終的にあなたが送ったデータに基づいて、あなたが欲しいフォームにつづり合わせて、ウェブページの影響を受けません。それから、対応するところでインターフェースを使って、対応する属性を導入します。検討しすぎないようにしてください。ここでは表のスクリーンショットを紹介しました。しかし、これは完全にデモンストレーション用です。ここを見てからも信じられます。ネットページの表は必要ないなら、全くレンダリングしなくてもいいです。データが必要なだけですので、インターフェイスがデータに戻ったら、パッケージのtranform方法を呼び出してデータを入力すれば、エクセルをエクスポートできます。
2、Excelをエクスポートして同時にスタイルを携帯します。ステップ3に戻ります。私達がtd、tr、thをつづり合わせる時、どのようなスタイルを書きたいですか？直接にHTMLにインラインを書くように、スタイルをstyleに書いて、スタイルを背景色、フォント、枠、インデントなどを書いてみたいです。自分で試してみてください。香りがいいです。
3、一部の需要の中で高級な操作で導出された列自体が占める可能性があります（2列、3列、4列、…列）、あるギルドが占めています（2行、3行、4行、…行）上の書き方を勉強して、colspan、ローソンpan属性を設定すればいいです。
4、エクスポートは本当に速いです。これは他の人がパッケージしたExcelモジュールライブラリを使ったことがないなら、本当に感じられないです。たとえデータが百数千になりますとしても、この方法を使って本当に流暢にエクスポートしてください。
最後に補充します。本文はどうやってホームページのデータをExcelにエクスポートするかを教えています。パッケージのコンポーネントではありません。私たちは一つの方法をカプセル化しています。一つの関数は何を意味しますか？あなたは完全にVueで使わなくてもいいです。例えJqueryやReactなどの先端フレームであっても、パッケージの良い方法を導入すればいいです。言わないでください。あまりにもすごいです。
ここで、VueでどのようにホームページのデータをExcelにエクスポートするかについての記事を紹介します。VueデータをExcelの内容にエクスポートします。以前の記事を検索してください。または次の関連記事を引き続きご覧ください。これからもよろしくお願いします。
最初の補充：ネット上では一部の牛人はすでにこの機能をコンポーネントにパッケージ化しましたが、一人一人のパッケージロジックは多種多様で、コンポーネントの機能も限られています。本当に自分の業務ニーズにぴったり合うとは限らないです。APIを探すのも面倒です。あまり使えない問題があります。どのように自分で関連している機能をカスタマイズして、どのようにExcelのスタイルをカスタマイズして、特にexcelを導出した後にユーザー定義のスタイル、これはいくつかの既存のパッケージの良いコンポーネントでは実現しにくいです。
本論文はExcelの方法の利点をエクスポートします。ウェブページのテーブルはExcelをエクスポートした後のテーブルと完全に独立しています。つまり、Excelをエクスポートした後の内容はウェブページと直接連絡していません。これはデータがExcelにエクスポートされた後、非常に強い注文性があることを意味します。2ブラウザをまたぐことができて互換性があって、甚だしきに至ってはあるEブラウザです。3エクスポートは非常に速いです。
一、足場を使ってVueプロジェクトを作成し、生成したsrcディレクトリの下でexport ToExcel.jsファイル（名前は自分で取ります）を作成し、App.vueの中で快速シミュレーションで表データを作成します。
1、私はここで簡単にウェブページの前のテーブルのデータをシミュレーションします。iviewのテーブルのコンポーネントを使っています。ホームページに展示されているテーブルのコンポーネントはあなたの好きなコンポーネントを使ってもいいです。ここでデモンストレーションをします。私と同じではありません。
<style lang="less">
</style>
<template>
<div>
<h2> iview table ， ， table </h2>
<Table :columns="column" :data="tableData"></Table> //iview Table
<Button @click="toExcel"> Excel</Button> // excel
</div>
</template>
<script>
import transform from './exportToExcel.js' // ，
export default {
name:'App', // ， App.vue
data(){
return {
tableData:[], //
column:[] //
}
},
methods:{
toExcel(){
// ， 3 ， ： ， ， ( )
transform(this.tableData, ' ', this.callback)
},
callback(info){
console.log(info)
}
},
created(){
//
this.tableData = [
{index:1,name:' 1 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:2,name:' 2 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:3,name:' 3 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:4,name:' 4 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:5,name:' 5 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:6,name:' 6 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:7,name:' 7 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:8,name:' 8 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:9,name:' 9 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:10,name:' 10 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:11,name:' 11 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:12,name:' 12 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:13,name:' 13 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:14,name:' 14 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'},
{index:15,name:' 15 ',age:18,sex:' ',hobby:'web',hair:'thick',salaried:'99999999'}
]
this.column = [
{key:'index',title:' ',width:120},
{key:'name',title:' ',width:120},
{key:'age',title:' ',width:120},
{key:'sex',title:' ',width:120},
{key:'hobby',title:' ',width:120},
{key:'hair',title:' ',width:120},
{key:'salaried',title:' ',width:120}
]
}
}
</script>
二、export ToExcel.jsファイルに入って、業務の論理コードを書き出します。つまり上記の対応するtransformという方法です。
構想を書きます：HTML文字列のつづり合わせの方法を採用して、つづり合わせて一つのテーブルを取り出して、Excelまで表示することができます。言い換えればHTMLの文法を使って書いたテーブルがエクセルに展示されています。スタイルも携帯できます。注意してスティッチングの過程を見てください。つづり合わせて分かりました。90%できます。
var idTmr;
// transform，
function transform(table, name, callback) { //table ,name ,
//callback , ( )
let tableInnerHTML = ''
let headerData = [' ',' ',' ',' ',' ',' ',' ']
let bodyData = table // ，
// thead、tbody、tr、td、th， tr、th、td colspan( )
//rowspan( ) 、 、
tableInnerHTML += '<thead><tr>'; // ！
tableInnerHTML += `<th colspan=${headerData.length}
style='background:#CCFFFF;border:solid;'>` + " " + "</th></tr>"
tableInnerHTML += '<tr>'
headerData.forEach(item => {
tableInnerHTML += "<th rowspan='1' style='background:#FFFFCC;border:solid'>"
+ item + "</th>"
})
tableInnerHTML += '</tr></thead>'; //
tableInnerHTML += '<tbody>' //
bodyData.forEach(item => {
tableInnerHTML += "<tr>"
tableInnerHTML += "<td align='center' style='border:solid'>" + item.index + "</td>"
tableInnerHTML += "<td align='center' style='border:solid'>" + item.name + "</td>"
tableInnerHTML += "<td align='center' style='border:solid'>" + item.age + "</td>"
tableInnerHTML += "<td align='center' style='border:solid'>" + item.sex + "</td>"
tableInnerHTML += "<td align='center' style='border:solid'>" + item.hobby + "</td>"
tableInnerHTML += "<td align='center' style='border:solid'>" + item.hair + "</td>"
tableInnerHTML += "<td align='center' style='border:solid'>" + item.salaried + "</td>"
tableInnerHTML += "</tr>"
})
tableInnerHTML += '</tbody>'; //
//------------OK， ， --------------------
//tip ( tip )
/*------- tip tip ， ！
， ， ！*/
function getExplorer() {
var explorer = window.navigator.userAgent;
if (explorer.indexOf('MSIE') >= 0) {
return 'ie'; // ie
} else if (explorer.indexOf('Firefox') >= 0) {
return 'Firefox'; // firefox
} else if (explorer.indexOf('Chrome') >= 0) {
return 'Chrome'; // Chrome
} else if (explorer.indexOf('Opera') >= 0) {
return 'Opera'; // Opera
} else if (explorer.indexOf('Safari') >= 0) {
return 'Safari'; // Safari
};
};
if (getExplorer() !== 'Safari' && name.substr(-1, 4) !== '.xls') {
name += '.xls';
}
if (getExplorer() === 'ie') {
var curTbl = table;
var oXL = new ActiveXObject('Excel.Application');
var oWB = oXL.Workbooks.Add();
var xlsheet = oWB.Worksheets(1);
var sel = document.body.createTextRange();
sel.moveToElementText(curTbl);
sel.select();
sel.execCommand('Copy');
xlsheet.Paste();
oXL.Visible = true;
try {
var fname=oXL.Application.GetSaveAsFilename('Excel.xls', 'Excel Spreadsheets (*.xls), *.xls');
} catch (e) {
print('Nested catch caught ' + e);
} finally {
oWB.SaveAs(fname);
// oWB.Close(savechanges = false);
oXL.Quit();
oXL = null;
idTmr = setInterval(Cleanup(), 1);
}
} else {
tableToExcel(tableInnerHTML, name, callback); /* ，
， ， 。 */
}
//tip
} // ， transform ！90% ！
/* ， ， ，
HTML Excel ， ， */
function Cleanup() {
window.clearInterval(idTmr);
}
let tableToExcel = (function () {
let template = '<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>';
let format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; });
};
return function (table, name, callback) {
let ctx = { worksheet: name || 'Worksheet', table: table };
let blob = new Blob([format(template, ctx)]);
let a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = name; // name ！
a.click();
a.remove();
callback('success'); /* ， Excel
， */
};
})();
export default transform; // transform
三、パッケージ作業が完了しました。もう一度振り返ってみると、2つのステップは自分のパッケージのtranform方法を使って、データ、ファイル名、コールバックだけが必要です。ここで理解してください。
1、ホームページとExcelは完全に分離されています。Excelはあなたのデータの影響だけを受けています。何のデータを送ってきたかは最終的にあなたが送ったデータに基づいて、あなたが欲しいフォームにつづり合わせて、ウェブページの影響を受けません。それから、対応するところでインターフェースを使って、対応する属性を導入します。検討しすぎないようにしてください。ここでは表のスクリーンショットを紹介しました。しかし、これは完全にデモンストレーション用です。ここを見てからも信じられます。ネットページの表は必要ないなら、全くレンダリングしなくてもいいです。データが必要なだけですので、インターフェイスがデータに戻ったら、パッケージのtranform方法を呼び出してデータを入力すれば、エクセルをエクスポートできます。
2、Excelをエクスポートして同時にスタイルを携帯します。ステップ3に戻ります。私達がtd、tr、thをつづり合わせる時、どのようなスタイルを書きたいですか？直接にHTMLにインラインを書くように、スタイルをstyleに書いて、スタイルを背景色、フォント、枠、インデントなどを書いてみたいです。自分で試してみてください。香りがいいです。
3、一部の需要の中で高級な操作で導出された列自体が占める可能性があります（2列、3列、4列、…列）、あるギルドが占めています（2行、3行、4行、…行）上の書き方を勉強して、colspan、ローソンpan属性を設定すればいいです。
4、エクスポートは本当に速いです。これは他の人がパッケージしたExcelモジュールライブラリを使ったことがないなら、本当に感じられないです。たとえデータが百数千になりますとしても、この方法を使って本当に流暢にエクスポートしてください。
最後に補充します。本文はどうやってホームページのデータをExcelにエクスポートするかを教えています。パッケージのコンポーネントではありません。私たちは一つの方法をカプセル化しています。一つの関数は何を意味しますか？あなたは完全にVueで使わなくてもいいです。例えJqueryやReactなどの先端フレームであっても、パッケージの良い方法を導入すればいいです。言わないでください。あまりにもすごいです。
ここで、VueでどのようにホームページのデータをExcelにエクスポートするかについての記事を紹介します。VueデータをExcelの内容にエクスポートします。以前の記事を検索してください。または次の関連記事を引き続きご覧ください。これからもよろしくお願いします。