web-dev-qa-db-ja.com

ローカルに保存されたファイルをVueJSにダウンロードする方法

アップロードシステムがあり、ユーザーにサンプルテンプレートを提供しようとしています。アセットのサブフォルダーにローカルに保存されているテンプレートがあります。VueJSコンポーネントのテンプレートにアクセスして、ページにリンクを表示します。これらはファイル構造の適用可能な部分です：

├──app
│  └──Components
│     └──Uploader.vue
└──assets
   └──files
      └──Template_Upload.csv

Uploader.vueには次の行があります。

<a v-bind:href="item.loc" download>{{item.title}}</a>

そして、輸出では私はこの行を持っています

data() {
  return {
    item: {title: 'Upload Template', loc: require('../../assets/files/Template_Upload.csv')}
}

この方法は、画像がある場合に機能します。リンクをクリックすると、画像がダウンロードされます。ただし、.csvファイルまたは.xlsxファイルを使用すると、ページを開くときにエラーがスローされます。私は使ってみました

import fileTemplate from "../../assets/files/FileTemplate.csv";

同様に、fileTemplateをlocプロパティとして使用します。これは、写真を使用する場合にも機能します。しかし、書類を持ち込むことはできません。これは私が乗り越えられない制限ですか、それとも私が試すことができる別の方法がありますか？

また、Visual Studio（つまり、.csprojファイル）に移動し、Template_Upload.csvBuild Action設定を " [コンテンツ]と[出力ディレクトリにコピー]設定が[常にコピー]に設定されている。

これらは、これまで主に使用してきたリソースです。

a Vue単一ファイルコンポーネント？）で画像をインポートして使用する方法

Visual Studioプロジェクトプロパティのさまざまな「ビルドアクション」設定とは何ですか？

htmlcsvdownloadvue.js
5
Judd

OverCoderに感謝します。ソリューションは、ローカルに保存されたファイルをWebpackサーバーに追加するために、CSVローダーを追加することでした。 webpackを使用する他の人のために、このモジュールをwebpack.config.jsファイルに追加しました。

    {
        test: /\.(csv|xlsx|xls)$/,
        loader: 'file-loader',
        options: {
            name: `files/[name].[ext]`
        }
    }

次に、テンプレートでこのようにファイルを簡単に参照できます。

<a href="/files/Template_Upload.csv" download>File Template</a>

またはこれ

<a :href="item.loc" download>File Template</a>

私が言ったのと同じデータリターンを使用します。ローダーでrequireステートメントを使用すると、プロジェクトのビルド時に「必須」ファイルがwwwroot/filesフォルダーに配置されます。おかげで、OverCoder、これは私に多くの時間を節約しました。

6
Judd

これは私にとってはうまくいきます。

<a href="../../assets/files/FileTemplate.csv" download>Download</a>

ダイアログでもうまく動作します。

2
Kwesi Aryee

これを試して：

<a href="../../assets/files/FileTemplate.csv">Download</a>
1
Sakkeer A