如何使用JavaScript从a标签获取PDF文件的MB单位大小

你可以通过发送HEAD请求获取PDF文件的响应头信息，从中提取文件字节数并转换为MB单位，再替换页面中的静态数值。以下是实现代码：

// 获取目标元素
const fileLink = document.querySelector('.file-link');
const sizeContainer = document.querySelector('.file-size');

// 发送HEAD请求获取文件头信息
fetch(fileLink.href, { method: 'HEAD' })
  .then(response => {
    if (!response.ok) throw new Error('文件请求失败');
    
    // 从响应头获取文件字节数
    const contentLength = response.headers.get('Content-Length');
    if (!contentLength) throw new Error('无法读取文件大小');
    
    // 转换为MB单位并保留两位小数
    const sizeInMB = (parseInt(contentLength) / (1024 * 1024)).toFixed(2);
    
    // 替换静态数值：找到容器内的第一个文本节点并更新内容
    const textNodes = Array.from(sizeContainer.childNodes).filter(node => node.nodeType === Node.TEXT_NODE);
    if (textNodes.length > 0) {
      // 保留原有的缩进格式，避免页面布局错乱
      textNodes[0].textContent = `    ${sizeInMB}`;
    }
  })
  .catch(error => {
    console.error('获取文件大小出错:', error);
    // 出错时在指定span中显示提示
    document.getElementById('velikost').textContent = '（获取失败）';
  });

代码说明 #

• 使用HEAD请求而非GET：仅获取响应头信息，无需下载整个文件，提升效率并节省带宽。
• 单位转换逻辑：将字节数除以1024*1024得到MB值，toFixed(2)确保显示两位小数，和原静态数值格式一致。
• 文本节点替换：精准定位原静态数值所在的文本节点，保留原有缩进，避免破坏页面布局。
• 错误处理：请求失败或无法获取文件大小时，在指定区域显示提示，不影响页面原有内容展示。

注意事项 #

如果PDF文件与当前页面跨域，需要服务器端配置CORS允许HEAD请求的跨域访问，否则会出现权限错误。

内容的提问来源于stack exchange，提问作者Michael Hajný