Question

在这里，我有一个图像，然后单击该图像。它会打开菜单，在菜单一个下载选项中，单击“下载”按钮。我要如何下载此图像？（imageUrl在下面的代码控制台中）。当我单击下载时，我想打开另存为并在PC中下载图像

HTML

<mat-menu #contextMenu="matMenu">
  <ng-template matMenuContent let-item="item">
    <button mat-menu-item (click)="downloadFile(item)">Download</button>
    <button mat-menu-item>Delete</button>
    <button mat-menu-item>Rename</button>
  </ng-template>
</mat-menu>

TS

folderObj : Folder = new Folder();

downloadFile(item) {
 this.folderObj.folderName = `${this.commonUrlObj.commonUrl}/${item.urloffolder}/${item.imageName}`;
 console.log(this.folderObj.folderName); // http://127.0.0.1:3000/122/122/733/15.jpg (this is imageUrl)
}

Answer 1

您可以使用锚标签检查下面的代码

<a download href="{{commonUrlObj.commonUrl}}/{{item.urloffolder}}/{{item.imageName}}">Download</a>

Answer 2

使用文件保存程序，我们可以做到这一点，希望这段代码有用

TS

private string UploadFile(string localPath, string objectName = null)
    {
        string projectId = ((Google.Apis.Auth.OAuth2.ServiceAccountCredential)googleCredential.UnderlyingCredential).ProjectId;

        try
        {
            // Creates the new bucket.
            var objResult = storageClient.CreateBucket(projectId, bucketName);
            if (!string.IsNullOrEmpty(objResult.Id))
            {
                // Upload file to google cloud server
                using (var f = File.OpenRead(localPath))
                {
                    objectName = objectName ?? Path.GetFileName(localPath);
                    var objFileUploadStatus1 = storageClient.UploadObject(bucketName, objectName, null, f);
                }
            }
        }
        catch (Google.GoogleApiException ex)
        {
            // Error code =409, means bucket already created/exist then upload file in the bucket
            if (ex.Error.Code == 409)
            {
                // Upload file to google cloud server
                using (var f = File.OpenRead(localPath))
                {
                    objectName = objectName ?? Path.GetFileName(localPath);
                    var objFileUploadStatus2 = storageClient.UploadObject(bucketName, objectName, null, f);
                }
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show(ex.ToString());
        }
        return objectName;
    }

服务

private bool SetStorageCredentials()
{
    bool status = true;
    try
    {
        if (File.Exists(credential_path))
        {
            Environment.SetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS", credential_path);
            using (Stream objStream = new FileStream(Environment.GetEnvironmentVariable("GOOGLE_APPLICATION_CREDENTIALS"), FileMode.Open, FileAccess.Read))
                googleCredential = GoogleCredential.FromStream(objStream);
            // Instantiates a client.
            storageClient = StorageClient.Create();
            channel = new Grpc.Core.Channel(SpeechClient.DefaultEndpoint.Host, googleCredential.ToChannelCredentials());
        }
        else
        {
            DialogResult result = MessageBox.Show("File " + Path.GetFileName(credential_path) + " does not exist. Please provide the correct path.");
            if (result == System.Windows.Forms.DialogResult.OK)
            {
                status = false;
            }
        }
    }
    catch (Exception ex)
    {
        MessageBox.Show(ex.ToString());
        status = false;
    }
    return status;
}

app.js（node.js代码）

 folderObj : Folder = new Folder();
 constructor(private userService : UserService){}
 import { saveAs} from 'file-saver';

downloadFile(item){
  let index = this.uploadedImagesObj.findIndex( x => x.imageName ===  item.imageName);
  var filename = this.uploadedImagesObj[index].imageName;
  this.userService.downloadFile({'filename': filename,'urloffolder' : item.urloffolder}).subscribe(
    (data) => {
      if(data && data != undefined && data != null){
        saveAs(data,filename);
      }
    }
  )
}

Answer 3

向a href和img src添加img路径，并像download一样添加<a href="imagepath" download="downloaded filename">属性

如果不起作用，请发表评论。

<div class="img-wrap">
    <img  src="imagepath"/>
    <i class="fa fa-download" aria-hidden="true">
        <a href="imagepath" download="downloaded filename"></a>
    </i>
</div>

如何使用node.js以角度下载图像？

3 个答案: