在前端开发中，有时候需要对一些文件链接进行特殊处理，比如对于一些图片链接或者PDF链接，有时我们需要通过浏览器打开进行预览，有时又不希望通过浏览器进行打开，而是希望能够直接下载到本地。但现实效果却往往跟我们相反，我们希望浏览器打开时，他却直接下载，我们希望浏览器下载时，他反而又在新的标签页直接打开文件。

其实造成这种情况，和响应头里 content-disposition 的属性值有关， content-disposition 是 MIME 协议的扩展 ，其作用就是用来处理一些文件的显示问题， content-disposition 的值为 inline 时，表示它可以显示在网页内，或作为网页，此时浏览器会自动进行预览， content-disposition 的值为 attachment 时，表示它应该下载，大多数浏览器呈现“另存为”对话框，如果filename存在值，也会预填入文件名。

了解了相关原理，就很好实现自己想要的方式了。如果只是针对个人电脑，可以通过下载一些浏览器插件，通过更改响应头 content-disposition 的值，进而实现自己想要的效果，但是如果是发布到生产，供其他用户使用，就需要要求后端开发按照自己的需求配置相关文件响应头中 content-disposition 的值，因为不可能要求每个用户都去安装相应的插件。

content-disposition 是 MIME 协议的扩展 ，其作用就是用来处理一些文件的显示问题， content-disposition的值为inline时，表示它可以显示在网页内，或作为网页，此时浏览器会自动进行预览， content-disposition的值为attachment时，表示它应该下载，大多数浏览器呈现“另存为”对话框 图片链接 二：请求后不显示图片， 直接 进行 下载 如果 Content-Type 是 application/octet-stream 或者 multipart/form-data 请求 图片链接 后是 直接 下载 。 主机记录 随便填什么 aaa , bbb 都行 解析线路 默认 记录值 填你的bucketname 就是你存储 文件 的bucket的名字 然后 . 域名所在区域 上海就是oss-cn-shanghai 然后 . aliyuncs.com TTL 默认的 10分钟不用改 配置完成后，在对象存储的bucket列表中找到你存放 文件 的bucket，点击进入，并点击左侧的传输管理中的域名管理 淡然自若_blog: 这个组件是基于el-input实现的，el-input有默认的样式，所以需要把el-input原有的样式，这里在组件里通过样式穿透的方式取消，但是也有可能受限于标签层级的嵌套，或者其它原因，导致我这里的穿透方式并不符合你的代码实际情况，因此这里需要你自行调试一下，把原有el-input的样式去除 // 取消element原有的input框样式 ::v-deep .el-input--mini .el-input__inner { border: 0px; margin: 0; padding: 0 15px; background-color: transparent; 基于element UI input组件自行封装“数字区间”输入框组件 xiaobizaizi666: 为什么我用的时候input有边框呢 基于element UI input组件自行封装“数字区间”输入框组件 淡然自若_blog: 这个你有没有注册组件，这个需要注册到vue属性中才能使用 Vue.component(InputNumberRange.name, InputNumberRange) 基于element UI input组件自行封装“数字区间”输入框组件 C位出道_2022: 博主，复制了你的代码后npm run serve会报错提示这个组件没法被发现怎么办