VueJS에 로컬 저장된 파일을 다운로드하는 방법

Question

시스템을 업로드하고 있는데 사용자를 위해 샘플 템플릿을 제공하려고합니다. 자산의 하위 폴더에 로컬로 저장된 템플릿이 있는데,이 템플릿을 내 VueJS 구성 요소에 액세스하고 해당 페이지의 링크를 표시하고 싶습니다.

Uploader.vue에서

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

나는이 라인이 :

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

를 그리고 수출 내가이 줄을

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

이 방법이 이러한 파일 구조의 applicaple 부품입니다 이미지가 있으면 작동합니다. 링크를 클릭하면 이미지가 다운로드됩니다. 그러나 .csv 또는 .xlsx 파일을 사용하면 페이지를 열 때 오류가 발생합니다. 나는 LOC 속성으로 fileTemplate을뿐만 아니라

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

을 사용하고 를 사용하여 시도했습니다. 이것은 그림을 사용하는 경우에도 작동합니다. 하지만 나는 문서를 가져올 수 없다. 이것은 과거에 얻을 수없는 한계입니까, 시도 할 수있는 다른 방법입니까?

나는 또한 (즉의 .csproj 파일에) 비주얼 스튜디오에 갔다, 그리고 설정은 OUPUT Directory에 설정이 "콘텐츠"로 설정되어 Template_Upload.csv 빌드 작업과 복사를 설정 한 "항상 복사"로 설정하십시오.

이

은 지금까지 내가 주로 사용했던 자원입니다 :

How to import and use image in a Vue single file component?

What are the various "Build action" settings in Visual Studio project properties and what do they do?

Answer 1

감사 OverCoder, 솔루션이 추가 순서에 CSV 로더를 추가 할 참이었다 웹 패키지 서버에 로컬로 저장된 파일.

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

가 그럼 난, 내 템플릿에 다음과 같이 쉽게

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

또는이

을 파일을 참조 할 수 있습니다 : 다른 사람이 웹팩을 사용하기 위해, 내 webpack.config.js 파일에이 모듈을 추가

내가 말했던 것과 동일한 데이터를 사용합니다. 로더와 함께 require 문을 사용하면 프로젝트가 빌드 될 때 "필수"파일이 wwwroot/files 폴더에 저장됩니다. 다시 한 번 감사드립니다, OverCoder,이 시간이 많이 절약되었습니다.