html5 download跨域不生效

最近有一個需求是PDF的文件的在線預覽和下載。當時立馬就想到了直接使用<a>標簽，因為目前主流瀏覽器(Chrome, Edge, Firefox)都有自帶的PDF預覽功能。

 

預覽：

<a href="http://xxxx.pdf" target="_blank"><span>預覽</span></a>

 

下載：

<a href="http://xxxx.pdf" target="_blank" download=""><span>下載</span></a>

 

本來以為上述代碼就能夠解決我的問題，但是實際上PDF下載功能一直無法生效。

原因是download屬性只會在href和你前端的地址是同源(非跨域)才會生效。如果href屬性的地址和前端的地址不同源，download屬性不起作用。所以上面下載的<a>連接，瀏覽器都是默認預覽打開而非我想要的下載。

 

解決方法：

1. 瀏覽器（Chrome）里面是可以將這個默認預覽PDF的功能關掉的，但是這樣做只有我本機才會生效，不是我們想要的

 

2. 跨域代理轉發

   如果使用的是Vue, 可以在vue.config.js添加(僅適合開發環境，如果是發布之后可以使用Nginx轉發)：

module.exports = {
  devServer: {
    proxy: {
      '/pdfpreview/*': {
        target: 'https://www.aaa.com',   //表示你跨域請求的接口的域名
        changeOrigin:true,    
        secure: false,
        headers: {      
          Referer: 'https://www.aaa.com'
        },
        pathRewrite:{
          '^/pdfpreview':'/'
        }
      }
    }
  }
}

　你也可以使用Nginx 實現，在conf--> nginx.conf文件添加

location /pdfpreview {
    rewrite  ^/pdfpreview/(.*)$ /$1 break;
    proxy_pass https://www.aaa.com/;
    proxy_pass_request_headers on; 
}
            

上面的配置，會把當前網站的帶有/pdfpreview的請求，比如www.bbb.com/pdfpreview的都轉發到www.aaa.com/去。

 

所以在前端代碼里面我們需要替換一下<a>的href屬性的值：

比如:

前端網站的地址是http://www.bbb.com

PDF的地址是https://www.aaa.com/gitalimage/abc.pdf

 

那么按照上面設定的配置，href里面連接此時應該為http://www.bbb.com/pdfpreview/gitalimage/abc.pdf

具體替換拼接url的代碼就不貼上來了，很多方法都可以實現