vue 에서 pdf 파일 미리 보기

머리말
프로젝트 를 작성 하 는 과정 에서 가끔 pdf 에 사용 되 는 파일 이 있 습 니 다.pdf 파일 을 보고 싶 을 때 pdf 파일 을 다운로드 하고 컴퓨터 에 설 치 된 pdf 전용 소프트웨어 를 통 해 pdf 파일 을 보 는 것 이 아 닙 니까?소프트웨어 를 설치 하지 말 라 는 요구 가 있다 면 소프트웨어 나 이 물건 을 어떻게 설치 해 야 열 수 있 는 지 모 르 는 사용자 가 많 잖 아 요.ok,이런 수요 가 생기 면 우리 도 이 루어 져 야 되 는 거 아니 야?그 이 유 는 우리 도 반박 할 수 없 잖 아.
사고 하 다.
말 나 온 김 에 어떻게 사용 할 지 생각해 보 세 요.pdf 가 필요 하 니까js 가 조작 할 수 있 는 라 이브 러 리 파일 이 있 는 지 모 르 겠 습 니 다.과감 한 바 이 두,우리 오늘 의 주인공 이 왔 습 니 다:pdfjs.
라 이브 러 리 디 렉 터 리 분석 및 다운로드
방안 이 생 겼 으 니 연 구 를 해 보 겠 습 니 다.먼저 이 라 이브 러 리 의 파일 을 다운로드 하고 주 소 를 다운로드 해 야 합 니 다.제 가 다운로드 하 겠 습 니 다.이 페이지 는 두 개 있 습 니 다.하 나 는 오래된 버 전 을 호 환 하 는 것 입 니 다.여러분 은 자신의 실제 상황 에 따라 다운로드 할 수 있 습 니 다.

다운로드 한 코드 구 조 는 다음 그림 과 같 습 니 다.

이 안 에는 두 개의 폴 더 가 있다.

build 이 안 에는 pdf 핵심 파일

웹 예

사용 방법
두 가지 사용 방법 이 있 습 니 다.하 나 는 핵심 라 이브 러 리 파일 을 통 해 pdf 미리 보 기 를 실현 하 는 것 이 고,또 하 나 는 주어진 예 를 통 해 pdf 파일 을 미리 보 는 것 입 니 다.여기 서 는 주어진 예 로 pdf 파일 을 미리 볼 수 있 습 니 다.관심 이 있다 면 핵심 파일 로 어떻게 실현 할 수 있 는 지 연구 해 보 세 요.
파일 위치
우선 vue 프로젝트 의 static 정적 디 렉 터 리 에 다운로드 한 파일 을 넣 어야 합 니 다.다음 그림:

실제 호출
필요 한 곳 에서 다음 과 같은 방식 으로 호출 합 니 다.

var url = encodeURIComponent(window.location.origin+'/other/202101/dc88623a-74c4-49c4-bc95-7e34d9cf6163.pdf')
window.open(window.location.origin + window.location.pathname+'static/pdfjs/web/viewer.html?file='+url)

위의 pdf 주 소 는 자신 이 로 컬 에 놓 은 경로 입 니 다.이 경 로 는 상대 적 이 고 절대적 인 경로 일 수 있 습 니 다.위 는 절대적 인 경로 입 니 다.
이때 다음 과 같은 효 과 를 볼 수 있 습 니 다.

문제.
이 pdf 파일 의 주소 와 현재 다운로드 한 라 이브 러 리 파일 주소 가 같은 도 메 인 에 있다 면 큰 문제 가 없 을 것 입 니 다.도 메 인 에 따라 도 메 인 간 문 제 를 해결 해 야 합 니 다.여기 서 해결 해 야 할 부분 이 있 습 니 다.바로 우리 가 다운로드 한 라 이브 러 리 파일 입 니 다.viewer.js 파일 의 아래 내용 설명 을 찾 습 니 다.

위의 그림 에서 빨간색 테두리 안의 내용 을 주석 합 니 다.서버 에서 다운로드 주 소 를 알려 준다 면 iframe 플러그 인 으로 해결 할 수 있 습 니 다.
총결산
사실은 도 메 인 을 뛰 어 넘 는 지식 이 가끔 유용 하 다 는 것 을 볼 수 있 습 니 다.위 에서 사 용 했 습 니 다.제 가 처음에 만 들 었 을 때 아무리 해도 나 오지 못 했 습 니 다.뒤에서 도 메 인 을 뛰 어 넘 어 다운로드 할 수 없다 는 것 을 알 게 되 었 습 니 다.현재 더 많은 용법 과 문제 가 있 으 니,여러분 이 제기 하신 것 을 환영 합 니 다.
이상 은 vue 에서 pdf 파일 을 미리 보 는 방법 입 니 다.vue 에서 pdf 파일 을 미리 보 는 방법 에 대한 자세 한 내용 은 vue 에서 pdf 파일 을 미리 보 는 자 료 를 사용 하 는 것 입 니 다.다른 관련 글 을 주목 하 십시오!