前端如何让图片、视频、pdf等文件在浏览器直接下载而非预览

ini 代码解读复制代码Content-Disposition: attachment; 
filename="your_file_name.pdf"

  async handleDownload(url, fileName) {
  if (!url) return;
  const baseUrl = process.env.VUE_APP_BASE_API || 
  '';
  let fullUrl = url;
  
  // 补全完整 URL
  if (!url.startsWith('http://') && !url.startsWith
  ('https://')) {
    fullUrl = [baseUrl, url].join('/').replace(/(?
    <!:)\/+/g, '/');
  }
  
  try {
    this.$message.info('正在获取文件，请稍候...');
    
    // 使用 fetch 获取文件流
    const response = await fetch(fullUrl);
    if (!response.ok) throw new Error('网络请求失败
    ');
    
    // 转换为 blob 数据
    const blob = await response.blob();
    
    // 创建本地的 blob URL（同源地址，download 属性必定
    生效）
    const objectUrl = window.URL.createObjectURL
    (blob);
    
    const a = document.createElement('a');
    a.href = objectUrl;
    a.download = fileName || '下载文件';
    a.style.display = 'none';
    
    document.body.appendChild(a);
    a.click();
    
    // 释放内存并移除 DOM
    document.body.removeChild(a);
    window.URL.revokeObjectURL(objectUrl);
  } catch (error) {
    console.error('下载失败:', error);
    // 降级方案：如果 fetch 失败（例如目标服务器未开启 
    CORS 跨域），回退到直接打开新窗口
    window.open(fullUrl, '_blank');
  }
}

 /**
 * 处理附件下载
 * 采用拼接 response-content-disposition 参数的方式，
 强制 OSS 响应下载头，避免浏览器跨域预览
 * 
 * @param {string} url 附件地址
 * @param {string} fileName 附件名称
 */
handleDownload(url, fileName) {
  if (!url) return;
  
  const baseUrl = process.env.VUE_APP_BASE_API || 
  '';
  let fullUrl = url;
  
  // 补全非 http(s) 开头的相对路径
  if (!url.startsWith('http://') && !url.startsWith
  ('https://')) {
    fullUrl = [baseUrl, url].join('/').replace(/(?
    <!:)\/+/g, '/');
  }
  
  // 构建强制下载的参数，对文件名进行 URI 编码处理避免乱
  码
  const safeFileName = encodeURIComponent
  (fileName || '下载文件');
  const disposition = `attachment;filename=$
  {safeFileName}`;
  
  // 判断原 url 是否已经带了问号（防止破坏 OSS 原有的预
  签名参数）
  const separator = fullUrl.includes('?') ? '&' : 
  '?';
  const downloadUrl = `${fullUrl}${separator}
  response-content-disposition=${disposition}`;

  // 动态创建 a 标签触发下载
  const a = document.createElement('a');
  a.href = downloadUrl;
  a.download = fileName || '下载文件'; // 备用 
  download 属性
  a.style.display = 'none';
  a.target = '_blank'; // 兼容部分浏览器的安全策略
  
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);