Category - Html

2021-05-28 23:13:22    6    0    0
2021-05-21 16:02:42    7    0    0
2021-05-17 18:08:34    4    0    0

注意, 跨域的图片地址不能下载, 会直接打开, 没跨域的可以下载

第一个: 图片下载点击会打开新标签页, 解决: href的url后面加上?response-content-type=application/octet-stream

  1. <a
  2. :href="item.url + '?response-content-type=application/octet-stream'"
  3. :download="item.name">点击下载</a>

第二个

  1. // url为下载地址
  2. fetch(url, { method: 'get', headers: { 'Content-Type': 'image/jpeg' } }).then(
  3. res => res.blob().then(blob => {
  4. var reader = new FileReader()
  5. reader.readAsDataURL(blob) // 转换为base64,可以直接放入a标签href
  6. reader.onload = function (e) {
  7. var downItem = document.createElement('a') // 转换完成,创建一个a标签用于下载
  8. downItem.style.display = "none"
  9. downItem.download = name
  10. downItem.href = String(e.target.result)
  11. downItem.click()
  12. downItem.remove()
  13. // document.body.appendChild(downItem);
  14. // downItem.click()
  15. // document.body.removeChild(downItem);
  16. }
  17. })
  18. )

通用方法: 跨域图片下载, 未跨域的也能下载

2019-11-14 15:46:28    6    0    0
var str = '如果有一天休息休息下cvcvx,'+"\n"+ ' 那么~~~'; 这种写法在html中是会被识别为"如果有一天休息休息下`cvcvx,\n 那么~~~" 那么如何保证其这么写会被识别,只需要在该div的样式中加入 `white-space":"pre"` 这个样式