正常可以用a鏈接+download屬性(只支持同源文件,非同源會直接打開不會下載)
但是。圖片類的會直接打開這張圖片,不是下載圖片。
解決方法:canvas轉base64后下載
```
<a class="download" v-for="(x,index) in content.content_info.download" :key="index" :href="gethref(x.file_url)" :download="x.file_url" @click="downloadImg(x)"> </a>
downloadImg(data){//下載圖片
var reg = new RegExp(/(.png|.jpg|.jpeg|.gif)/g, 'i');
if(data && data.file_name && data.file_name.match(reg) && data.file_name.match(reg).length>0){
// 圖片轉base64地址
var fixtype = function () {
var r = data.file_name.match(reg);
return 'image/' + r;
}
var images = new Image();
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
images.crossOrigin = 'anonymous';
images.src = data.file_url
images.onload=function(){
var _w = images.naturalWidth;
var _h = images.naturalHeight;
canvas.width = _w
canvas.height = _h
context.drawImage(images,0,0);
var a = document.createElement('a');
a.href = canvas.toDataURL(fixtype()); //將畫布內的信息導出為png圖片數據
a.download = data.file_name; //設定下載名稱
a.click(); //點擊觸發下載
}
}
},
gethref(url){//根據url判斷是否是圖片。如果是圖片,給a的href設置成“javascript:void(0)”
var reg = new RegExp(/(.png|.jpg|.jpeg|.gif)/g, 'i');
if(url && url.match(reg) && url.match(reg).length>0){
return 'javascript:void(0)';
}else{
return url;
}
}
```
下載文本
```
var iframe = null;
var iframedoc = null;
if (document.all){//IE
iframe = document.frames["iframe"];
iframedoc = document.frames["iframe"].document;
}else{//Firefox
iframe = document.getElementById("iframe");
iframedoc = document.getElementById("iframe").contentDocument;
}
var url = 'http://pbp38mcp7.bkt.clouddn.com/15441697177232.py';
if (!iframe) return;
iframe.url = url;
var filename = 'hello.py'
var a = document.createElement('a')
var blob = new Blob([iframe.contentWindow.document.body.innerHtml])
a.download = filename
a.href = URL.createObjectURL(blob)
a.click()
URL.revokeObjectURL(blob)
```
- CSS
- 長度單位
- 問題們
- 背景漸變
- 禁止用戶選中
- 給富文本重置樣式
- 移動端常見小問題
- bfc
- flex
- 父元素沒有包裹子元素的margin
- VUE
- 原理
- 生命周期
- vue-router原理
- 動態修改路由參數
- 在新窗口打開頁面
- 連跳兩個頁面
- 跳轉頁面自動回到頂部
- vue+webpack項目,停留一段時間報錯
- vue 路由去掉#
- webpack編譯目錄設置
- config配置
- HTTP
- HTTP狀態碼
- HTTP1.0,HTTP1.1,HTTP2.0
- axios和ajax的區別
- 模塊化
- git
- 比較
- 查看遠程倉庫地址
- git flow
- 比較分支的不同并保存壓縮文件
- Tag
- 回退
- node版本管理
- npm
- 確定用戶是否在當前頁面
- 前端下載文件
- 只能在微信中訪問
- 下載圖片
- webpack修改路徑為相對路徑
- 打開新頁面-被瀏覽器攔截
- textarea高度隨內容變化
- Debian/Ubuntu 安裝shadowsock
- 垂直居中
- video
- 去掉ios原始播放大按鈕
- 前端直播
- ios系列
- js彈出錯誤代碼
- nginx在MAC上的安裝、啟動、重啟和關閉
- 解析latex格式的數學公式
- Mac 新建unix可執行文件
- 正則-格式化a鏈接
- 原型
- unicode解析
- vue+webpack打包優化
- 各種JS題
- ES6
- seo
- React
- 兼容性
- canvas
- zsh