下载文件跨域问题

2,237 阅读1分钟

方法一

downloada(url) {
			let name = "test"
			let image = new Image()
			image.setAttribute('crossOrigin','anonymous');	
			image.src =url;
			image.onload = () => {
				let canvas = document.createElement('canvas')
				canvas.width = image.width
				canvas.height = image.height
				let ctx = canvas.getContext('2d')
				ctx.drawImage(image, 0, 0, image.width, image.height)
				canvas.toBlob((blob) => {
					let url = URL.createObjectURL(blob)
					this.downloadb(url, name)

					URL.revokeObjectURL(url)
				})
			}
		},
		downloadb(href,name) {
			  let eleLink = document.createElement('a')
			   eleLink.download = name
			   eleLink.href = href
			   eleLink.click()
			   eleLink.remove()
		},




方法二

downloada(url) {
      url= url.replace(/\\/g, '/');
      const xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = () => {
        if (xhr.status === 200) {
          // 获取文件blob数据并保存
          var fileName = this.getFileName(url);
          this.saveAs(xhr.response, fileName);
        }
      };
      xhr.send();
   },
    saveAs(data, name) {
        var urlObject = window.URL || window.webkitURL || window;
        var export_blob = new Blob([data]);
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
        save_link.href = urlObject.createObjectURL(export_blob);
        save_link.download = name;
        save_link.click();
    },
    getFileName(url) 
    {
        var num = url.lastIndexOf('/')+1
        var fileName = url.substring(num)
        //把参数和文件名分割开
        fileName = decodeURI(fileName.split("?")[0]);
        return fileName;
    },
    
    
    
    
   nginx配置
   
   add_header Cache-Control no-store;
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,OPTIONS;