Question

我有两个选项供用户打开图像：

1）直接下载从我的aspx请求返回的图像-不工作。

2）只需在新标签-工作精细中打开原始（高质量）图像即可。

下面的代码段指向一个内部服务器，因此在此环境下不起作用。

<div class="modal-header">
    <a
      type="image/jpg"            
      [href]="theImage.CompUrl"
      title="Save Image"
      download="img_{{ theImage.UID }}.jpg"
    >
      <i class="fa fa-floppy-o" aria-hidden="true"></i>
    </a>
    <a
      type="button"
      class="btn btn-primary btn-sm"
      [href]="originImgUrl"
      title="Open Original Image"
      target="_blank"
    >
      <i class="fa fa-share" aria-hidden="true"></i>
    </a>
</div>

第一个href也包含download属性，但是由于URL不直接引用jpg图片，因此它会将返回的图片打开到新标签页。

呈现的html显示如下：

<div _ngcontent-c40="" class="modal-content">
	<div _ngcontent-c40="" class="modal-header ng-star-inserted">
		<a _ngcontent-c40="" class="btn btn-primary btn-sm" 
			type="image/jpg" 
			href="https://Server01.DomainName.com/Folder1234/TheServer.aspx?s=33333444445555a&amp;m=comp&amp;id=1330849" 
			title="Export Image" download="img_1330849.jpg">
			<i _ngcontent-c40="" aria-hidden="true" class="fa fa-floppy-o"></i>
		</a>
		<a _ngcontent-c40="" class="btn btn-primary btn-sm" target="_blank" type="button" 
			href="https://Server01.DomainName.com/Folder1234/TheServer.aspx?s=cc4444444423aa&amp;m=org&amp;id=1330849" 
				title="Export Original Image">
				<i _ngcontent-c40="" aria-hidden="true" class="fa fa-share"></i></a>
				<button _ngcontent-c40="" class="close" data-dismiss="modal" type="button">×</button>
	</div>
</div>

是否有解决方法，可以在我的第一个请求中直接下载图像？

Answer 1

永久解决方案是从服务器https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Disposition添加Content-Disposition响应标头。将其添加到服务器端后，就可以请求附件了。

同时，我只是将图像数据写入隐藏的画布，然后使用toDataURL Canvas API：

在Angular组件中：

const hiddenCanvas = document.createElement("canvas");
hiddenCanvas.width = this.imageObj.width;
hiddenCanvas.height = this.imageObj.height;
this.ctxHidden = hiddenCanvas.getContext("2d");
this.ctxHidden.drawImage(this.imageObj, 0, 0);
this.saveImgSrc = hiddenCanvas.toDataURL("image/jpeg", 1);
this.printImg.nativeElement.src = this.saveImgSrc; // displayed in modal-body

<div *ngIf="printModalType == 'export'" class="modal-header">
        <a
          type="button"
          class="btn btn-primary btn-sm"
          href="{{ saveImgSrc }}"
          title="Save image"
          download="img_{{ theImage.UID }}.jpg"
        >
          <i class="fa fa-floppy-o" aria-hidden="true"></i>
        </a>
</div>

使用href标签直接下载图片

1 个答案: