ホームページ ウェブフロントエンド jsチュートリアル js がレポートをエクスポートする方法の分析例

js がレポートをエクスポートする方法の分析例

Apr 02, 2018 pm 04:35 PM
javascript

项目中签到模块需要导出每天的签到数据,一开始用poi在后台导出,window下运行没什么问题,但是把项目部署到linux环境上,提示导出路径不存在,思索良久也没有找到解决的办法,最后只能在前端使用js导出表格。本篇文章给大家分享的是实例剖析js如何导出报表的操作详解,内容挺不错的,希望可以帮助到有需要的朋友

注意:js导出表格是利用浏览器自带的下载功能去实现的,所以不需要定义下载路径,很好用,唯一的缺点就是,表格样式不知道怎么去定义。

一:导入jquery

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
ログイン後にコピー


二:页面准备一个table和一个导出的按钮


<table id="mytab" border="1">  
<tr>  
<th>Month</th>  
<th>Savings</th>  
</tr>  
<tr>  
<td>January</td>  
<td>$100</td>  
</tr>  
</table>  
 <input value="开始导出" type="button" id="export" onclick="method5(&#39;mytab&#39;)">   //参数为table的id
ログイン後にコピー


三:js代码

<script type="text/javascript">  
//打印表格
var idTmr;  
function getExplorer() {  
var explorer = window.navigator.userAgent;  
//ie  
if (explorer.indexOf("MSIE") >= 0) {  
return &#39;ie&#39;;  
}  
//firefox  
else if (explorer.indexOf("Firefox") >= 0) {  
return &#39;Firefox&#39;;  
}  
//Chrome  
else if (explorer.indexOf("Chrome") >= 0) {  
return &#39;Chrome&#39;;  
}  
//Opera  
else if (explorer.indexOf("Opera") >= 0) {  
return &#39;Opera&#39;;  
}  
//Safari  
else if (explorer.indexOf("Safari") >= 0) {  
return &#39;Safari&#39;;  
}  
}  
function method5(tableid) {  
if (getExplorer() == &#39;ie&#39;) {  
var curTbl = document.getElementById(tableid);  
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 = window.setInterval("Cleanup();", 1);  
}  
} else {  
tableToExcel(tableid)  
}  
}  
function Cleanup() {  
window.clearInterval(idTmr);  
CollectGarbage();  
}  
var tableToExcel = (function() {  
var uri = &#39;data:application/vnd.ms-excel;base64,&#39;, template = &#39;<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>&#39;, base64 = function(  
s) {  
return window.btoa(unescape(encodeURIComponent(s)))  
}, format = function(s, c) {  
return s.replace(/{(\w+)}/g, function(m, p) {  
return c[p];  
})  
}  
return function(table, name) {  
if (!table.nodeType)  
table = document.getElementById(table)  
var ctx = {  
worksheet : name || &#39;Worksheet&#39;,  
table : table.innerHTML  
}  
window.location.href = uri + base64(format(template, ctx))  
}  
})()  
</script>
ログイン後にコピー

坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

以上がjs がレポートをエクスポートする方法の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

WeChat で Douyin プライベート メッセージの絵文字を取得するにはどうすればよいですか?プライベート メッセージの絵文字パッケージをエクスポートするにはどうすればよいですか? WeChat で Douyin プライベート メッセージの絵文字を取得するにはどうすればよいですか?プライベート メッセージの絵文字パッケージをエクスポートするにはどうすればよいですか? Mar 21, 2024 pm 10:01 PM

ソーシャルメディアの台頭が続く中、Douyinは人気のショートビデオプラットフォームとして多くのユーザーを魅了しています。 Douyin では、ユーザーは自分の生活を公開するだけでなく、他のユーザーと交流することもできます。このインタラクションにおいて、絵文字は徐々にユーザーが感情を表現する重要な手段になってきました。 1. WeChat で Douyin プライベート メッセージ絵文字を取得するにはどうすればよいですか?まず、Douyin プラットフォームでプライベート メッセージ絵文字を取得するには、Douyin アカウントにログインし、気に入った絵文字を参照して選択する必要があります。友達に送信するか、自分で収集するかを選択できます。 Douyin で絵文字パッケージを受信した後、プライベート メッセージ インターフェイスで絵文字パッケージを長押しし、「絵文字に追加」機能を選択できます。このようにして、この顔文字パッケージをDouyinの顔文字ライブラリに追加できます。 3. 次に、Douyin 顔文字ライブラリに単語を追加する必要があります

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 Dec 17, 2023 pm 02:54 PM

WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法 はじめに: 技術の継続的な発展により、音声認識技術は人工知能の分野の重要な部分になりました。 WebSocket と JavaScript をベースとしたオンライン音声認識システムは、低遅延、リアルタイム、クロスプラットフォームという特徴があり、広く使用されるソリューションとなっています。この記事では、WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法を紹介します。

QQ Music からダウンロードした曲を Mac で MP3 としてエクスポートするには、2 つの手順だけが必要です QQ Music からダウンロードした曲を Mac で MP3 としてエクスポートするには、2 つの手順だけが必要です Jan 05, 2024 pm 07:10 PM

音楽を聴くことは非常に一般的なことであり、多くの友人がどこにいても音楽を聴くと思います。あなたは普段音楽を聴くためにどのようなソフトウェアを使用していますか?あなたも私と同じように QQ ミュージックを利用していますか?現在、曲を聴くのに QQ Music を使用していますが、携帯電話だけでなく Mac コンピュータでも使用できます。オンラインで曲を聴くだけでなく、QQ ミュージックからお気に入りの曲をコンピュータにダウンロードすることもできます。しかし、QQ Music for Mac からダウンロードした曲は必要な形式ではありません。必要なのは MP3 形式の音楽です。では、QQ Music for Mac からダウンロードした曲を MP3 形式にエクスポートするにはどうすればよいですか? QQ Music for Mac からダウンロードした曲を MP3 形式にエクスポートして変換するにはどうすればよいですか? QQ Music for Mac からダウンロードした曲を MP にエクスポートして変換したい場合

xmind ファイルを PDF ファイルにエクスポートする方法 xmind ファイルを PDF ファイルにエクスポートする方法 Mar 20, 2024 am 10:30 AM

xmind は、非常に実用的なマインド マッピング ソフトウェアです。人々の思考とインスピレーションを使用して作成されたマップ形式です。xmind ファイルを作成した後、通常、誰もが配布して使用できるように、PDF ファイル形式に変換します。次に、xmind ファイルをエクスポートする方法PDFファイルに?以下に具体的な手順を示しますので、ご参照ください。 1. まず、マインド マップを PDF ドキュメントにエクスポートする方法を説明します。 [ファイル]-[エクスポート]機能ボタンを選択します。 2. 新しく表示されたインターフェースで[PDFドキュメント]を選択し、[次へ]ボタンをクリックします。 3. エクスポート インターフェイスで、用紙サイズ、方向、解像度、ドキュメントの保存場所などの設定を選択します。設定が完了したら、[完了]ボタンをクリックします。 4. [完了]ボタンをクリックした場合

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー Dec 17, 2023 pm 05:30 PM

WebSocketとJavaScript:リアルタイム監視システムを実現するためのキーテクノロジー はじめに: インターネット技術の急速な発展に伴い、リアルタイム監視システムは様々な分野で広く利用されています。リアルタイム監視を実現するための重要なテクノロジーの 1 つは、WebSocket と JavaScript の組み合わせです。この記事では、リアルタイム監視システムにおける WebSocket と JavaScript のアプリケーションを紹介し、コード例を示し、その実装原理を詳しく説明します。 1.WebSocketテクノロジー

Kujiale で断面図をエクスポートする方法_Kijiale で断面図をエクスポートする方法 Kujiale で断面図をエクスポートする方法_Kijiale で断面図をエクスポートする方法 Apr 02, 2024 pm 06:01 PM

1. まず、Kujiale で処理する設計図を開き、上の図面リストの下にある建設図面をクリックします。 2. 次に、フルカラーのフロア プランをクリックして選択します。 3. 次に、図面内の不要な家具を非表示にし、エクスポートする必要がある家具だけを残します。 4. 最後に、「ダウンロード」をクリックします。

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法 Dec 17, 2023 pm 12:09 PM

JavaScript と WebSocket を使用してリアルタイム オンライン注文システムを実装する方法の紹介: インターネットの普及とテクノロジーの進歩に伴い、ますます多くのレストランがオンライン注文サービスを提供し始めています。リアルタイムのオンライン注文システムを実装するには、JavaScript と WebSocket テクノロジを使用できます。 WebSocket は、TCP プロトコルをベースとした全二重通信プロトコルで、クライアントとサーバー間のリアルタイム双方向通信を実現します。リアルタイムオンラインオーダーシステムにおいて、ユーザーが料理を選択して注文するとき

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 WebSocketとJavaScriptを使ったオンライン予約システムの実装方法 Dec 17, 2023 am 09:39 AM

WebSocket と JavaScript を使用してオンライン予約システムを実装する方法 今日のデジタル時代では、ますます多くの企業やサービスがオンライン予約機能を提供する必要があります。効率的かつリアルタイムのオンライン予約システムを実装することが重要です。この記事では、WebSocket と JavaScript を使用してオンライン予約システムを実装する方法と、具体的なコード例を紹介します。 1. WebSocket とは何ですか? WebSocket は、単一の TCP 接続における全二重方式です。

See all articles