자산 폴더에 pdf 파일을 '업로드'하고 싶습니다. pdf-viewer로 자산 폴더에서 pdf 파일을 표시 할 수 있습니다. 내 프로젝트 (로컬로만 실행되어야 함)의 경우 파일을 자산 폴더에 업로드 할 수 있기를 원합니다.
내 버전 정보 :
Angular CLI: 11.0.2
Node: 15.3.0
OS: win32 x64
Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1100.2
@angular-devkit/build-angular 0.1100.2
@angular-devkit/core 11.0.2
@angular-devkit/schematics 11.0.2
@angular/cdk 11.0.1
@angular/material 11.0.1
@schematics/angular 11.0.2
@schematics/update 0.1100.2
rxjs 6.6.3
typescript 4.0.5
업데이트 :이 문제를 혼자 해결했습니다. 이 페이지를보십시오 :
장 : 로컬 PDF 파일 렌더링
https://www.npmjs.com/package/ng2-pdf-viewer
다음 명령을 실행하여 Angular App PdfViewerModule에 설치합니다.
npm install ng2-pdf-viewer
App-Module.ts에 가져 오기를 추가하십시오.
import { PdfViewerModule } from 'ng2-pdf-viewer';
App-Module.ts의 가져 오기에 이것을 추가하십시오.
imports: [
PdfViewerModule
],
구성 요소의 html 파일에 다음 템플릿을 추가합니다.
<input (change)="onFileSelected()" type="file" id="file">
<pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;"></pdf-viewer>
구성 요소의 .ts 파일에 다음 코드를 추가하십시오.
pdfSrc: string;
onFileSelected() {
let $img: any = document.querySelector('#file');
if (typeof (FileReader) !== 'undefined') {
let reader = new FileReader();
reader.onload = (e: any) => {
this.pdfSrc = e.target.result;
};
reader.readAsArrayBuffer($img.files[0]);
}
}
이제 로컬 파일 시스템에서 pdf 파일을 선택할 수 있으며 웹 페이지에 즉시 표시됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다