js 在线查看pdf文件大小

JavaScript 本身并没有内置的功能可以直接查看 PDF 文件的大小，因为这通常涉及到文件的下载和服务器端的处理。不过，可以通过以下几种方法来间接获取 PDF 文件的大小：

基础概念

PDF 文件大小通常指的是文件在磁盘上占用的空间，以字节为单位。在线查看 PDF 文件大小通常意味着在不下载整个文件的情况下获取其大小信息。

类型

客户端检测：通过浏览器提供的 API 获取文件大小。
服务器端检测：服务器返回文件的元数据，包括文件大小。

应用场景

文件上传前的检查：用户上传文件前，告知用户文件大小是否符合要求。
文件下载前的提示：用户点击下载前，显示文件大小以便用户决定是否继续。

实现方法

方法一：使用 Fetch API 获取文件头信息

可以通过 Fetch API 获取文件的响应头信息，其中 Content-Length 字段表示文件的大小。

async function getFileSize(url) {
    try {
        const response = await fetch(url, { method: 'HEAD' });
        if (response.ok) {
            const contentLength = response.headers.get('Content-Length');
            return parseInt(contentLength, 10);
        } else {
            throw new Error('Failed to fetch file size');
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

// 使用示例
getFileSize('path/to/your/file.pdf').then(size => {
    console.log(`File size is ${size} bytes`);
});

方法二：服务器端返回文件大小

如果无法直接从客户端获取文件大小，可以编写服务器端代码来返回文件的元数据。

例如，使用 Node.js 和 Express：

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();

app.get('/file-size', (req, res) => {
    const filePath = path.join(__dirname, 'path/to/your/file.pdf');
    fs.stat(filePath, (err, stats) => {
        if (err) {
            return res.status(500).send('Error getting file size');
        }
        res.json({ size: stats.size });
    });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

客户端调用：

fetch('/file-size')
    .then(response => response.json())
    .then(data => {
        console.log(`File size is ${data.size} bytes`);
    })
    .catch(error => console.error('Error:', error));

遇到的问题及解决方法

问题：跨域请求失败

原因：浏览器的同源策略限制了不同源之间的请求。

解决方法：服务器端设置 Access-Control-Allow-Origin 头允许跨域请求。

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    next();
});

问题：文件不存在或路径错误

原因：指定的文件路径不正确或文件不存在。

解决方法：确保文件路径正确，并处理文件不存在的情况。

fs.stat(filePath, (err, stats) => {
    if (err) {
        if (err.code === 'ENOENT') {
            return res.status(404).send('File not found');
        }
        return res.status(500).send('Error getting file size');
    }
    res.json({ size: stats.size });
});

通过上述方法，可以在不下载整个 PDF 文件的情况下获取其大小信息，提升用户体验和系统效率。