angular读取后台传过来的文件

最新推荐文章于 2023-12-07 11:05:18 发布

today有点骚

最新推荐文章于 2023-12-07 11:05:18 发布

阅读量950

点赞数

分类专栏：学习angular

本文链接：https://blog.csdn.net/qq_36330993/article/details/108962526

版权

学习angular 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了后端通过Spring Boot实现的文件下载服务，利用GET请求接收目录参数，读取并编码静态PDF文件，然后前端通过Angular调用API获取PDF，使用ng2-pdfjs-viewer实现在线预览。关键步骤包括文件路径处理、Base64编码和浏览器预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台


    @RequestMapping(value = "/file", method = RequestMethod.GET)
    public ResultJson getGuidePDFInfoByDirectory(@RequestParam String fileDirectory){
//        System.out.println("收到加载pdf文件请求，路径为：");
//        System.out.println(fileDirectory);
        String path = "static/pdf/upload/" + fileDirectory;
//        String path = "static/pdf/upload/Use a  GHOST-CAP  in acute brain injury.pdf";
        byte[] buffer = null;
        try {
            ClassPathResource classPathResource = new ClassPathResource(path);
            File file = classPathResource.getFile();
//            System.out.println("读取文件：");
//            System.out.println(file.getName());
            InputStream inputStream = classPathResource.getInputStream();
            //输出文件
            InputStream fis = new BufferedInputStream(inputStream);
            buffer = new byte[fis.available()];
            fis.read(buffer);
            fis.close();
        }catch (FileNotFoundException e){
            System.out.println("文件不存在或者文件不可读或者文件是目录");
        }catch (IOException e){
            e.printStackTrace();
        }
        String json = new String(Base64.getEncoder().encode(buffer));
        return ResultJson.success(json);
    }

前端

ts文件

 // 根据文件路径返回pdf文件并在新的页面显示
    public openPdf() {

        let url = `api/file?fileDirectory=${this.selectedPDFInfo.fileDirectory}`;
        this.guidePDFinfoService.downloadFile(url).subscribe(
            (res) => {
                //Base64解密
                this.bytes = atob(res);
                // 与Buffer配套使用
                (window as any).global = window;
                // @ts-ignore
                window.Buffer = window.Buffer || require('buffer').Buffer;
                // 将二进制字符串编码为二进制的buffer
                const buf = Buffer.from(this.bytes, 'binary');
                //添加进Blob文件
                let blob = new Blob([buf], {type:'application/pdf'});
                // console.log(blob);
                this.pdfViewer.pdfSrc = blob; // pdfSrc can be Blob or Uint8Array
                this.pdfViewer.refresh(); // Ask pdf viewer to load/refresh pdf
            }
        );
    }

html模板


                <div >
                    <button nz-button (click)="openPdf()"
                    >
                        {{selectedPDFInfo.name}}
                    </button>
                </div>
                <div style=" height: 36px;line-height: 36px;">
                    备注：
                </div>
                <div>
                <textarea rows="4" nz-input [(ngModel)]="selectedPDFInfo.note" >
                    {{selectedPDFInfo.note}}
                </textarea>
                </div>
<!--                <div>-->
<!--                    <button nz-button  (click)="save()">保存文件</button>-->
<!--                </div>-->
                <div style="width: 800px; height: 400px">
                    <ng2-pdfjs-viewer
                        #pdfViewer
                        [externalWindow]="true"
                        [downloadFileName]="this.selectedPDFInfo.name"
                        [openFile]="false"
                        [viewBookmark]="false"
                        [download]="false"></ng2-pdfjs-viewer>
                </div>

service.ts


    // 从后台获取pdffile
    downloadFile(url:string):Observable<any>{
        return this.http.get<any>(url);
    }