前端下载视频变成打开新页面怎么解决

如果前端下载视频的代码执行后，视频变成了在新页面中打开，可能是因为代码中没有取消默认行为，导致链接被点击后直接跳转了。可以尝试添加 `event.preventDefault()` 取消默认行为，代码如下：

function downloadVideo(url, event) {
  event.preventDefault();
  let downloadLink = document.createElement('a');
  downloadLink.href = url;
  downloadLink.download = url.match(/[^/]*$/)[0];
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

同时，需要在调用函数时传入事件对象：

<a href="https://example.com/video.mp4" onclick="downloadVideo(this.href, event)">下载视频</a>

这样，在点击链接时会先触发 `downloadVideo` 函数，取消默认行为后再执行下载操作，避免了视频被打开新页面的问题。

相关问题

js 下载视频而不是打开网页

在JavaScript中，要实现下载视频而不是打开网页，可以通过以下步骤完成：

1. 首先，确定要下载的视频文件的URL。可以通过在网页上找到视频元素，然后获取其源URL或嵌入在iframe或video标签中的URL。

2. 创建一个 `a` 元素来处理下载操作。可以使用 `document.createElement` 方法创建一个 `<a>` 元素。

3. 将视频文件的URL赋值给 `a` 元素的 `href` 属性。这可以通过使用 `setAttribute` 方法来做。

4. 设置 `download` 属性为文件名。这样可以确保浏览器会将URL作为文件下载，而不是打开。

5. 将 `a` 元素添加到DOM树中。可以通过使用 `appendChild` 方法将其添加到 `body` 元素或其他合适的容器中。

6. 触发 `a` 元素的点击事件。可以使用 `click` 方法模拟用户点击下载链接的操作。

以下是示例代码：

function downloadVideo(videoUrl) {
  const a = document.createElement('a');
  a.setAttribute('href', videoUrl);
  a.setAttribute('download', 'video.mp4');
  
  document.body.appendChild(a);
  
  a.click();
}

调用 `downloadVideo` 函数并传入视频文件的URL作为参数，即可实现下载视频而不是打开网页。

请注意，由于浏览器的安全限制，此方法在某些情况下可能无法正常工作。特别是如果视频文件来自不同的域，可能会出现跨域访问的问题。此时，可以考虑将视频文件上传到服务器，并通过后端代码处理下载操作。

前端下载文件时没有直接下载而是打开了一个新的页面

出现这种情况通常是因为浏览器默认处理文件类型的方式不同，例如某些浏览器会自动打开 PDF 文件而不是下载它。

为了确保文件始终被下载而不是打开，可以在 `href` 属性中添加 `download` 属性。例如：

function downloadFile(url, filename) {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
}

在这个例子中，我们将文件的 URL 和名称传递给 `downloadFile` 函数。该函数创建一个新的 `a` 标签，并将 `href` 属性设置为文件的 URL。然后，我们将 `download` 属性设置为文件的名称，这将提示浏览器下载文件而不是打开它。最后，我们使用 `click` 方法模拟用户点击链接，从而触发文件下载。