最近有一個需求是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新增：

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; 
}
            

然後在前端程式碼裡面替換一下<a>的href屬性的值：

比如:

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

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

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