js如何打开下载的文件怎么打开

function downloadAndOpenFile(fileContent, fileName, fileType) {

    const blob = new Blob([fileContent], { type: fileType });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.open(url);
}

正文

一、文件对象的URL

1. 创建文件URL

使用URL.createObjectURL方法可以为File或Blob对象创建一个URL，这个URL可以在浏览器中打开。这个方法非常方便，特别是当你需要预览用户上传的文件时。

const inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', handleFiles, false);
function handleFiles() {
    const fileList = this.files;
    const file = fileList[0];
    const url = URL.createObjectURL(file);
    window.open(url);
}

2. 释放URL对象

创建的URL对象需要在不再使用时进行释放，以避免内存泄漏。

URL.revokeObjectURL(url);

二、FileReader API

1. 读取文件内容

FileReader API允许你异步读取文件内容。你可以选择以文本、数据URL或ArrayBuffer的形式读取文件。

const inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', handleFiles, false);
function handleFiles() {
    const fileList = this.files;
    const file = fileList[0];
    const reader = new FileReader();
    reader.onload = function(event) {
        const fileContent = event.target.result;
        console.log(fileContent);
    };
    reader.readAsText(file);
}

2. 读取数据URL

如果你需要读取图像文件并显示在网页上，可以使用readAsDataURL方法。

const inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', handleFiles, false);
function handleFiles() {
    const fileList = this.files;
    const file = fileList[0];
    const reader = new FileReader();
    reader.onload = function(event) {
        const imageUrl = event.target.result;
        const imgElement = document.createElement('img');
        imgElement.src = imageUrl;
        document.body.appendChild(imgElement);
    };
    reader.readAsDataURL(file);
}

三、Blob对象

1. 创建Blob对象

Blob对象可以表示不可变的、原始数据的类文件对象。你可以使用Blob对象来存储和处理二进制数据。

const fileContent = 'Hello, world!';

const blob = new Blob([fileContent], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
window.open(url);

2. Blob对象的应用

Blob对象在处理图像、视频和其他大型文件时非常有用。例如，你可以使用Blob对象将文件分片上传到服务器。

const fileContent = 'Some large content';

const blob = new Blob([fileContent], { type: 'text/plain' });
const chunkSize = 1024 * 1024; // 1MB
const totalChunks = Math.ceil(blob.size / chunkSize);
for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize;
    const end = Math.min(blob.size, start + chunkSize);
    const chunk = blob.slice(start, end);
    // 上传chunk到服务器
    uploadChunk(chunk);
}

四、用户交互

const fileContent = 'Download me!';

const blob = new Blob([fileContent], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'example.txt';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
window.open(url);

2. 使用FileReader和Blob对象结合

结合使用FileReader API和Blob对象，可以实现复杂的文件操作，例如读取文件内容并生成新的文件供用户下载。

const inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', handleFiles, false);
function handleFiles() {
    const fileList = this.files;
    const file = fileList[0];
    const reader = new FileReader();
    reader.onload = function(event) {
        const fileContent = event.target.result;
        const newFileContent = fileContent.toUpperCase(); // 简单处理文件内容
        const blob = new Blob([newFileContent], { type: 'text/plain' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'processed.txt';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        window.open(url);
    };
    reader.readAsText(file);
}

五、处理大型文件

1. 分片读取文件

对于大型文件，可以使用FileReader API的slice方法分片读取文件内容。

const inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', handleFiles, false);
function handleFiles() {
    const fileList = this.files;
    const file = fileList[0];
    const chunkSize = 1024 * 1024; // 1MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    for (let i = 0; i < totalChunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(file.size, start + chunkSize);
        const chunk = file.slice(start, end);
        const reader = new FileReader();
        reader.onload = function(event) {
            const chunkContent = event.target.result;
            console.log(`Chunk ${i + 1}:`, chunkContent);
        };
        reader.readAsText(chunk);
    }
}

2. 分片上传文件

分片上传可以有效地管理大型文件的上传，避免内存占用过多或网络中断导致的上传失败。

const inputElement = document.getElementById('fileInput');

inputElement.addEventListener('change', handleFiles, false);
function handleFiles() {
    const fileList = this.files;
    const file = fileList[0];
    const chunkSize = 1024 * 1024; // 1MB
    const totalChunks = Math.ceil(file.size / chunkSize);
    for (let i = 0; i < totalChunks; i++) {
        const start = i * chunkSize;
        const end = Math.min(file.size, start + chunkSize);
        const chunk = file.slice(start, end);
        uploadChunk(chunk, i + 1, totalChunks);
    }
}
function uploadChunk(chunk, chunkNumber, totalChunks) {
    const formData = new FormData();
    formData.append('file', chunk);
    formData.append('chunkNumber', chunkNumber);
    formData.append('totalChunks', totalChunks);
    fetch('/upload', {
        method: 'POST',
        body: formData,
    })
    .then(response => response.json())
    .then(data => {
        console.log(`Chunk ${chunkNumber} uploaded successfully`);
    })
    .catch(error => {
        console.error('Error uploading chunk:', error);
    });
}