相关疑难解决方法(0)

过去几天我一直在研究这个问题.试图在<embed src>标签上显示流没有运气,我只是试图在新窗口上显示它.

新窗口仅显示PDF 控件 )

知道为什么没有显示pdf的内容吗？

码:

$http.post('/fetchBlobURL',{myParams}).success(function (data) {
    var file = new Blob([data], {type: 'application/pdf'});
    var fileURL = URL.createObjectURL(file);
    window.open(fileURL);
});

我有一个带有ASP.Net Web API的angular2项目.我有代码从我的数据库中检索文件路径,该文件路径转到我服务器上的文档.然后,我想在浏览器中的新选项卡中显示此文档.有没有人有任何建议怎么做？

我很高兴在Angular2(Typescript)或我的API中检索文件并将其流式传输.

这是我尝试在我的API中检索它但我无法弄清楚如何在Angular2中接收它并正确显示它:

public HttpResponseMessage GetSOP(string partnum, string description)
    {
        var sopPath = _uow.EpicorService.GetSOP(partnum, description).Path;
        HttpResponseMessage result = new HttpResponseMessage(HttpStatusCode.OK);
        var stream = new FileStream(sopPath, FileMode.Open);
        result.Content = new StreamContent(stream);
        result.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/octet-stream");
        return result;
    }

任何帮助将不胜感激.

非常感谢!!!

我有这个角度项目,我有一个填充页面的大背景图像和一个带有链接的简单侧边栏,点击后,将用另一个图像(来自cdn)更改背景的URL.由于这些图像相当大,它们需要一两秒才能加载并且它很明显,我想添加一个预加载器,但我不确定如何在角度2中完成.

在我的HTML中我有这个:

<section class="fullsizebg image-bg" [ngStyle]="{'background-image': 'url(' + urlImage + ')'}"></section>

变量urlImage填充在组件的构造函数中,侧边栏链接在单击时更改它的值,使用一个简单的函数,如下所示:

generateImage(data: any){
    this.urlImage = 'http://example.com/mycdn/'+this.data.url+'.jpg';
}

因此,网址实际上会立即更改,但图像需要加载一些.我想添加一个加载gif或类似的东西,以保持图像变化顺利给用户,而不是像现在一样跳跃.

我在Angular 5应用程序中遵循以下链接在新选项卡中显示pdf页面。但是无法达到目的。

我正在使用spring控制器api中的bytes数组。

PDF Blob未显示内容，Angular 2

PDF Blob-弹出窗口不显示内容

Angular2显示PDF

我尝试了以下选项，但是它们都不起作用。

试验1

将响应消耗为json

component.ts

clickEvent(){
this.service.getPDF().subscribe((response)=>{

  let file = new Blob([response.byteString], { type: 'application/pdf' });            
  var fileURL = URL.createObjectURL(file);
  window.open(fileURL);
})

}

服务

getPDF(){
const url = `${this.serviceUrl}/pdf`;

const httpOptions = {
  headers: new HttpHeaders(
    {
      'Accept': 'application/json',
      'responseType':'blob'
    }
  )
};

return this.http.get<any>(url, httpOptions);

}

试用2

将响应消耗为json

component.ts

clickEvent(){
this.service.getPDF().subscribe((response)=>{

  let file = new Blob([response.byteArray], { type: 'application/pdf' });            
  var fileURL = URL.createObjectURL(file);
  window.open(fileURL);
})

}

服务

getPDF(){
const url …

我使用window.URL.createObjectURL来创建一个blob:http链接,用于预览img标签中的所选图像:

<img src=""{{itemPhoto}}"" />

itemPhoto是在组件中定义的字段,在选择图像文件时分配:

selectPhoto(photos: any[]) {
    if (photos[0]) {
      this.itemPhoto = window.URL.createObjectURL(photos[0]);
    }
  }

这适用于angular2 RC1但不再适用于2.0.0.

以下是进入src属性的内容:

unsafe:blob:http://localhost:5555/xxxxx-xxxx-xxxx-xxxx-xxxxxxxxx

在阅读其他一些帖子后我尝试了以下内容:

this.itemPhoto = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(photos[0]));

然后以下内容进入src属性:

unsafe:SafeValue must use [property]=binding: blob:http://localhost:5555/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxx (see http://g.co/ng/security#xss)

有什么建议？

非常感谢

更新:好的,我真的不明白src里面的错误信息:"unsafe:SafeValue必须使用[property] = binding:..."

而不是src={{itemPhoto}},以下工作:

<img [src]="itemPhoto" />

仍然不确定为什么.

“我想下载一个从基于 Spring 的 Restful Web 服务发送到我的 Angular 应用程序的 .pdf 文件。如何下载它，我的 Angular 应用程序或 Spring Boot 上是否缺少一些代码？”

我从 Angular 6 应用程序向我的 spring-boot 服务器发送 HTTP GET 请求，该服务器生成一个 .pdf 文件，然后将此 .pdf 文件作为 blob 发送给我，但是当我尝试在我的 Angular 一侧创建一个 blob 时，打开pdf，显示以下错误：

。ERROR 错误：请求正文不是 blob 或数组缓冲区

我在 StackOverflow 上访问了以下问题，以找到一些解决方案： 1. PDF Blob 未显示内容，Angular 2 2.如何访问 Angular 2 http 响应正文而不将其转换为字符串或 json？ 3.将 HTTPResponse 主体中的字节流转换为 pdf 文件 4.使用 SpringBoot 将文件发送到 Angular2

在 Angular 应用程序中： 组件：

 


getPDF(){
      this.apiService.getPDF(this.invoiceId)
      .subscribe(
        (data) => {
          //data.blob() doesnt work properly
          var file …
Run Code Online (Sandbox Code Playgroud)

我想使用这个 Angular 6 代码实现文件下载：

休息API：

private static final Logger LOG = LoggerFactory.getLogger(DownloadsController.class);

@GetMapping(path="export") 
public ResponseEntity<byte[]> export() throws IOException {
    File pdfFile = Paths.get(EXTERNAL_FILE_PATH).toFile();


    byte[] fileContent = Files.readAllBytes(pdfFile.toPath());

    HttpHeaders headers = new HttpHeaders();
    headers.setContentType(MediaType.parseMediaType("application/pdf"));
    // Here you have to set the actual filename of your pdf
    String filename = "output.pdf";
    headers.setContentDispositionFormData(filename, filename);
    headers.setCacheControl("must-revalidate, post-check=0, pre-check=0");
    ResponseEntity<byte[]> response = new ResponseEntity<>(fileContent, headers, HttpStatus.OK);
    return response;
}

服务：

import {Injectable} from '@angular/core';
import {HttpClient, HttpParams} from "@angular/common/http";
import {Observable} from "rxjs/index";
import {environment} …