JS端基于download.js实现图片、视频时直接下载而不是打开预览

要实现前端直接下载文件而不是打开预览，可以借助 download.js 库来实现。download.js 是一个轻量级的 JavaScript 库，可以让你在浏览器中下载文件。它允许你使用 JavaScript 下载文件，无需打开预览窗口或重定向到下载链接。

以下是实现该功能的详细攻略：

步骤 1：引入下载库和样式文件

首先，你需要在你的 HTML 文件中引入 download.js 库和它的样式文件：

<!--引入下载库和样式文件-->
<link rel="stylesheet" href="path/to/download.css">
<script src="path/to/download.js"></script>

步骤 2：编写下载文件的触发事件

其次，你需要为下载文件的触发事件编写代码。这个事件可以是一个按钮点击事件、一个图片点击事件、或者其他任何触发下载的交互事件。

假设你有一个按钮，你需要为按钮的点击事件绑定下载代码：

<!--按钮示例-->
<button id="downloadBtn">下载文件</button>

// 绑定下载文件的代码
document.querySelector('#downloadBtn').addEventListener('click', function() {
  // 下载代码
  download("https://yourdomain.com/path/to/file.jpg", "文件名.jpg", "image/jpg");
});

上述 download 方法接受三个参数：

• 文件的 URL：表示要下载的文件。这个 URL 可以是你的网站上的一个文件，或者其他任何 URL。
• 文件名：表示下载的文件的名称。这个名称可以随意设置。
• 文件类型：表示下载的文件的 MIME 类型。这是可选的参数，如果你不指定的话，下载脚本将会自动确定 MIME 类型。

步骤 3：测试

最后，你可以测试你的代码是否能够正常工作。点击按钮，你应该可以下载指定的文件并保存到你的本地电脑中。

以下是另一个示例，如果你想下载视频而不是图片，可以使用以下代码：

// 绑定下载视频的代码
document.querySelector('#videoDownloadBtn').addEventListener('click', function() {
  // 下载代码
  download("https://yourdomain.com/path/to/file.mp4", "视频文件名.mp4", "video/mp4");
});

这里同样使用 download 方法，只是传递了文件的不同 MIME 类型。