vue 前端通过URL链接下载图片pnf等

vue 前端通过URL链接下载图片pnf等

提示：如果后端返回的链接是可以通过以下方法直接下载的可跳过本章节
window.open(url, ‘_blank’) //外部窗口打开下载

---

提示：解释一下如果上诉方法是在浏览器打开预览，无法下载图片或者pdf等，请看下方文章。

---

前言

提示：为什么有的链接使用window.open()方法可以通过浏览器下载呢，window.open()是做什么的，下面给大家解释一下

---

一、window.open()是什么？

window.open()方法，这个方法的本身就是无法去下载http，https，链接的图片，pdf等
他的含义是导航到一个特定的url，也可以添加第二个参数选择是在内部打开，还是新建外部打开，哪为什么有的用这个方法可以下载文件的，而图片、pdf，就变成了预览了呢，是因为，浏览器会去解析你的地址，从而解析演变成了预览

二、解决url下载功能，

1.在utils目录下创建dowload.js文件

代码如下：

function DOWLOAD_FILE(url, proxy, proxyhttp) {
    DOWLOAD_FILE_PRO(url, '', proxy, proxyhttp)
}

function DOWLOAD_FILE_PRO(url, filename, proxy, proxyhttp) {
    // 下载地址
    var dowloadURL = url
    // 有代理链接地址，当前链接里面同时存在代理地址可以进行替换
    if (proxyhttp && proxy && dowloadURL.includes(proxyhttp)) {
        // 替换代理链接地址为代理协议
        dowloadURL = dowloadURL.replace(proxyhttp, proxy)
        // 代理链接下载
        DOWLOAD_FILE_URL(dowloadURL, filename)
    } else if (proxy) {
        // 将下载链接匹配上代理协议
        dowloadURL = proxy + dowloadURL
        // 代理链接下载
        DOWLOAD_FILE_URL(dowloadURL, filename)
    } else {
        // 链接下载
        DOWLOAD_FILE_URL_PRO(dowloadURL, filename)
    }
}


function DOWLOAD_FILE_URL(url, filename) {
    // 创建一个a节点插入的document
    var a = document.createElement('a')
    // 模拟鼠标click点击事件
    var event = new MouseEvent('click')
    // 设置a节点的download属性值
    a.download = DOWLOAD_FILE_NAME(url, filename)
    // 将需要下载的URL赋值给a节点的href
    a.href = url
    // 触发鼠标点击事件
    a.dispatchEvent(event)
}
function DOWLOAD_FILE_NAME(url, filename) {
    // 文件名称
    var fname = filename
    // 没有文件名同时链接有值
    if (!fname && url) {
        // 获得最后一个斜杠坐标
        const index = url.lastIndexOf('/')
        // 从斜杆后一个坐标开始截取
        fname = url.substring(index + 1)
    }
    // 返回
    return fname
}

// 导出
module.exports = {
    DOWLOAD_FILE
}

2.页面写入

代码如下：

<template>
  <div>
    <div class="dowload-btn"
         @click="touchProxyDowload">按钮-代理下载</div>
  </div>
</template>
<script>
import { DOWLOAD_FILE } from '@/utils/dowload'
export default {
  data() {
    return {}
  },
  methods: {
    // 按钮-代理下载（代理配置存放在 vue.config.js，也可以放在服务器中配置）
    touchProxyDowload() {
      // 有后缀的则会使用当前后缀图片名称，也可以像上面那样自定义
      DOWLOAD_FILE(
        'https://.......',
        '/dowload'
      )
    },
  },
}
</script>

---

三、配置proxy代理

module.exports = {
	devServer: {
		// 端口号
		port: 8080,
		// 配置不同的后台API地址
		proxy: {
			'/dowload': {
				target: 'https：//......',
				ws: false,
				changeOrigin: true,
				pathRewrite: {
					'^/dowload': '',
				},
			},
		},
	},
}

---

总结

讲到这里就结束了，本人也是边学习边分享，觉得有用的，分享给大家。欢迎大家借鉴，代码来自GitHub上面一位大神写的，精简后自测可用，如不可用，可以去GitHub clone下全部代码 ，大家点赞收藏，以备不时之需。谢谢。

附上大神传送门https://github.com/dengzemiao/DZMH5Dowload.git