需求背景
后端接口中返回的是pdf文件路徑比如：
pdf文件路徑?（https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf）
前端適配是這樣的
<a
>
超鏈接預覽pdf
</a>點擊后預覽
但是客戶方要求不預覽點擊后直接下載
示例演示? （pdf下載 - 碼上掘金）
項目準備
有pdf鏈接的可以跨過該階段
準備一個線上的pdf文件鏈接
登陸阿里云平臺
1. 點擊又上角的控制臺
?2. 點擊左上角的三道杠圖標
?3. 點擊左側的對象云存儲oss
?4. 點擊bucket
5. 創(chuàng)建 bucket
?6. 創(chuàng)建成功后
?7. 上傳文件
點擊紅框處
?點擊上傳文件
?
8. 上傳完成后為了方便訪問可以把文件的訪問屬性修改為公共的
到這里文件鏈接就創(chuàng)建好了，可以直接復制鏈接訪問
解決文件鏈接跨域問題
點擊數據安全中的跨域設置
規(guī)則設置
?
設置完成后就可以隨意訪問了啦
實現（js）
HML
<!DOCTYPE html>
<html lang="CH-EN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>下載</title>
</head>
<body>
<div class="content">
<a
>
超鏈接預覽pdf
</a>
<button id="btn" type="submit" onclick="download()">點擊下載pdf</button>
</div>
</body>
</html>script
<script>
const filePath =
"https://wangzhendongsky.oss-cn-beijing.aliyuncs.com/wzd-test.pdf";
// fileName是pdf名稱 、filePath是pdf地址
function downloadFil(fileName, filePath) {
var ajax = new XMLHttpRequest();
ajax.open("GET", filePath, true);
ajax.responseType = "blob";
ajax.onload = (e) => {
console.log(e);
let res = e.target.response;
let blob = new Blob([res]);
let aLink = document.createElement("a");
aLink.download = `${fileName}.pdf`; // 下載文件的名字
aLink.href = URL.createObjectURL(blob);
aLink.click();
};
ajax.send();
}
function download() {
downloadFil("test", filePath);
}
</script>style
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.content {
height: 300px;
width: 500px;
border: solid #ddd 1px;
text-align: center;
padding: 20px;
}
.content input {
height: 24px;
line-height: 24px;
font-size: 18px;
border: 1px solid #dcdfe6;
}
.content input:focus {
outline: none;
border-color: #409eff;
}
.content input:focus-visible {
outline-offset: 0px;
}
</style>
實現（vue）
downloadjs
github地址：https://github.com/rndme/download
安裝
npm install downloadjs -S
導入
import download from "downloadjs"
使用
download(url, strFileName, strMimeType);
download第一個參數為URL，第二個參數為文件名稱，第三個參數文件類型，url必填，另外兩個選填
遇到的問題
1.下載的文件打不開，且大小不對 // 中文名稱文件下載 download(encodeURI(URL))
2.不能自定義名稱
在URL進行轉碼后雖然可以下載PDF文件了，但名稱卻是轉碼后的名稱，而不是原本的名稱，這時我們用第二個參數進行命名時，名稱是對了，可文件卻出現打不開，大小不對的情況，暫時沒找到解決方法。
file-saver
github地址：https://github.com/eligrey/FileSaver.js
該庫是我之前寫頁面轉PDF時使用到的庫，既然之前可以保存pdf文件，那現在是不是也可以呢，上網一搜還真可以
安裝
npm i file-saver文章來源：http://www.zghlxwxcb.cn/news/detail-665296.html
使用?文章來源地址http://www.zghlxwxcb.cn/news/detail-665296.html
const that = this
var oReq = new XMLHttpRequest()
var URL= '' // URL 為URL地址
oReq.open('GET', URL, true)
oReq.responseType = 'blob'
oReq.onload = function() {
var file = new Blob([oReq.response], {
type: 'blob'
})
FileSaver.saveAs(file, that.name) // that.name為文件名
}
oReq.send()到了這里，關于pdf格式文件下載不預覽，云存儲的跨域解決的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
