質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.59%

JavascriptでのExcelファイルのダウンロードについて

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 7,818

score 148

表題の件で質問お願い致します。
サーバーサイド側で以下のコードからExcelファイルを出力しています。
流れとしてはひな形となるExcelファイルをコピーし、システムの日付を付与して新しいファイルとして出力。その後出力したファイルを読み込み、指定のセルに値を書き込むという流れです。

目的はサーバー側で作成、格納されているExcelファイルをクライアント側からもダウンロードさせたいと考えています。
その際にファイル名や保存先も任意で決めれるのが理想形です。

Excelファイル作成部分

const fs = context.global.fs;
const moment = context.global.moment;


//年、月、日 情報取得
var date = moment().format('YYYYMMDD')
var year = moment().year();
var month = moment().month() + 1;
var day = moment().date();

// コピー元ファイル(ひな形になるファイル)
const src = 'C:\\Users\\Desktop\\test\\test_excel.xlsx';

//コピー先ファイル
const dest = "C:\\Users\\Desktop\\test\\" + month + "月\\" + date + ".xlsx";

//ファイル作成
fs.copyFileSync(src, dest);

Excel書き込み部分

const XlsxPopulate = context.global.xlsxpopulate;
const moment = context.global.moment;

//年、月、日 情報取得
var date = moment().format('YYYYMMDD')
var year = moment().year();
var month = moment().month() + 1;
var day = moment().date();

//テスト用書き込み変数
var test1 = '日本語';
var test2 = 'English';
var test3 = 100;
var test4 = 0.5;
var test5 = 2000;

XlsxPopulate.fromFileAsync('"C:\\Users\\Desktop\\test\\" + month + "月\\" + date + ".xlsx"')
.then(book => {
    const sheet1 = book.sheet("Sheet1")
    sheet1.cell("A2").value(test1)
    sheet1.cell("B4").value(test2)
    sheet1.cell("A10").value(test3)
    sheet1.cell("B11").value(test4)
    sheet1.cell("D14").value(test5)
    sheet1.cell("H4").value(2000)
    book.toFileAsync('"C:\\Users\\Desktop\\test\\" + month + "月\\" + date + ".xlsx"');
    })


サイトを参考にさせて頂きコピペですが試しに以下のコードを記入しました
参考サイト
以下のコードでは出力する内容は変数contentに直接記述しており、ファイル名なども固定になっています。
的外れな質問なのですが、ダウンロードしたい内容を”Excelファイル”に指定することは可能でしょうか?
またその際にダウンロードされるパスやファイル名を任意で指定する方法はありますでしょうか?
もしこのやり方では不可能であれば他の案もアドバイスを頂きたいです。
知識も浅くそもそも出来るのかという事すら分からないので的外れな質問かと思いますが宜しくお願い致します。

イメージ説明

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>Download Sample</title>
    </head>
    <body>
        <script type='text/javascript'>
            function handleDownload() {
                var content = 'あいうえお';
                var blob = new Blob([ content ], { "type" : "text/plain" });

                if (window.navigator.msSaveBlob) { 
                    window.navigator.msSaveBlob(blob, "test.txt"); 

                    // msSaveOrOpenBlobの場合はファイルを保存せずに開ける
                    window.navigator.msSaveOrOpenBlob(blob, "test.txt"); 
                } else {
                    document.getElementById("download").href = window.URL.createObjectURL(blob);
                }
            }
        </script>
        <a id="download" href="#" download="test.txt" onclick="handleDownload()">ダウンロード</a>
    </body>
</html>

また、以下の例でも試したのですが画像のようなエラーとなり成功しませんでした
(ブラウザはFireFoxです)

<a href="C:\Users\Desktop\test\test_excel.xlsx" download="downloadtest.xlsx">ダウンロード</a>


イメージ説明

追記
上記の記述方法ではなく以下のように書き換えてみましたがリンクを押しても反応なしでした
しかしfile:///C:/sample/test_excel.xlsx←この部分をアドレスバーに入力するとファイルのダウンロードのダイアログが出ます
htmlでの記述内容が足りないのでしょうか?

<a href="file:///C:/sample/test_excel.xlsx" download="downloadtest.xlsx">ダウンロード</a>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/11/06 12:28

    サーバーではなくローカルでは >C:\\Users\\Desktop\\

    キャンセル

  • ---stax---

    2018/11/06 12:51

    回答ありがとうございます。サーバーやクライアントを意識しなければいけない物を作るのが今回初めてで知識がなく本当に申し訳ないのですが、自分の解釈としては自分のPCをサーバーに見立てて作っています。自分の環境(ローカルPC)で作成したwebアプリを他のPCからhttp〜を叩いてアクセスしてページを開いてボタンを押したりするとExcelファイルをダウンロード出来るようにしたいと思っています。(クライアント側はnode.jsなどが入っていないPC)サーバー側としてファイルの格納場所は何か共有ファイルのようなものに入れるべきという事でしょうか?知識がなく的外れな質問で大変申し訳ありません。

    キャンセル

  • m.ts10806

    2018/11/06 16:17

    結局Node.jsは使うのでしょうか、使わないのでしょうか。

    キャンセル

回答 1

checkベストアンサー

+2

「サーバー」と仰っていますが見立ても何もローカルアクセスにしかなっていません。
ちなみに「ローカルファイル」とした場合、JavaScriptなどクライアント側の言語からアクセスすることは基本出来ません。
やはりローカルでもWebサーバーを立てて(XAMPPなどでApacheを入れる)ダウンロード処理自体はPHPなどサーバー側の言語に任せるべきかと。
ファイルもその立てたWebサーバーとしてアクセスできる箇所に置くべきですね。
「他のPCからhttp~叩いて」となると尚更、ローカルアプリとして動かしていては実現は出来ません。
「他のPCから」を社内や同じLAN内ではない、本当に外部のPCからブラウザで実行となると、ローカルWebサーバーでも基本的には出来ませんので、レンタルサーバー借りるか何かする必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/11/08 16:05

    ありがとうございます。
    ご指摘の通り理解出来ておりません・・・
    パスの書き方は
    ① Webサーバ記述例: http://www.tagPage/
    ② パソコンの記述例: file:///c:/www.tagPage/
    の2種類があると解釈してます(この時点で間違えていたらすいません)
    Node.jsは自分のローカルPCのCドライブ以下に配置しており、その自分の環境でwebアプリを作成して、現在は自分のブラウザで動作確認しています。
    ①の記述方法を使う場合はサーバー側にアクセスできるフォルダなどを用意してあればそこにアクセスできる。②の記述方法では回答頂いたようにブラウザからアクセスしているPCのファイルを見に行ける、と認識しています。
    今回は自分のPCで開いたブラウザでwebアプリを確認しているので②の記述方法でいけると思ったのですが間違っているでしょうか・・・

    キャンセル

  • 2018/11/08 16:12

    ブラウザからアクセスしているPCのファイルを見に行ける

    という考え方はとりあえず捨ててください。

    キャンセル

  • 2018/11/08 16:14

    自身のPCのファイルへのアクセスならわざわざブラウザ介す意味ないですよね

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.59%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る