VueJ를 사용하여 다른 창에서 PDF 파일 열기s

VueJ를 사용하여 다른 창에서 PDF 파일 열기s

이전 Angular 앱에서는 다른 창에서 다음과 같이 이력서를 열 수 있었습니다.

<a class="link popup" href="javascript:void(0);" onclick="javascipt:window.open('./../../assets/Resume_Christopher_Kade.pdf');">Resume</a>

Vue를 사용하여 웹 사이트를 다시 작성할 때 다음과 같이 변경한 후 의도한 대로 작동하지 않는 것을 알게 되었습니다.

<a class="link popup" href="javascript:void(0);" v-on:click="openPdf()">Resume</a>

와 함께openPdf()내 컴포넌트 메서드:

openPdf () {
    javascipt:window.open('./../assets/Resume_Christopher_Kade.pdf');
}

링크를 클릭하면 다음 URL로 새 페이지가 열립니다.

http://localhost:8080/assets/Resume_Christopher_Kade.pdf

브라우저의 pdf 뷰어에 pdf를 표시하는 대신 화면에 빈 경로를 표시합니다.

이 문제는 Vue에서 경로를 처리하는 방식과 관련이 있을 수 있습니다.

export default new Router({
  mode: 'history',
  routes: [    
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/work',
      name: 'Work',
      component: Work
    },
    {
      path: '/posts',
      name: 'Posts',
      component: Posts
    },
    { path: '*', component: Home }
  ]
})

왜 Angular에서처럼 간단하지 않지?내가 뭘 빼놓았나요?

알아냈나?

이 솔루션은 로컬에서 실행되는 Vue CLI 3으로 작성된 프로젝트용입니다(아직 프로젝트를 구축하지 않았습니다).

제 문제도 당신과 비슷했어요.난 그냥...<a>링크를 클릭하면 새 탭에서 PDF 파일이 열렸지만 내 URL은 단일 해시를 내 경로에 연결하고 내 홈 페이지로 리디렉션했습니다.그리고 그것은 놀랍도록 쉬운 수정이었다.

<a href="./resume.pdf" target="_blank">resume</a>

점 하나, 슬래시 하나, 그리고 내 파일 이름만.그리고 내 파일은 root > public folder 아래에 있습니다.

상대 경로 Import

JavaScript, CSS 또는 *.vue 파일 내에서 상대 경로(로 시작해야 함)를 사용하여 정적 자산을 참조하면 해당 자산이 웹 팩의 종속성 그래프에 포함됩니다.

https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports

다음 조건을 만족할 수단은staticVue CLI에 의해 기본적으로 생성된 폴더는 PDF를 여기에 넣고 다음과 같이 수행할 수 있습니다.<a href="./../static/file.pdf" target="_blank">.

언급URL : https://stackoverflow.com/questions/48517942/opening-a-pdf-file-in-another-window-with-vuejs