前端文件预览：利用download属性控制浏览器下载行为

xhr.onload = function () {
    if (xhr.status === 200) {
        // ...执行初步处理...

        let target = document.getElementById('RightContentPreview');
        target.replaceChildren(); // 清空现有内容
        let previewUrl = URL.createObjectURL(file); // 创建Blob URL
        let previewEl = document.createElement('object');
        previewEl.setAttribute('data', previewUrl);
        previewEl.setAttribute('type', 'application/pdf'); // 示例：指定MIME类型
        target.insertAdjacentElement('beforeend', previewEl);
        target.classList.add('show', 'active');
    } else {
        // ...处理错误...
    }
}

xhr.onload = function () {
    if (xhr.status === 200) {
        // ...执行初步处理...

        let target = document.getElementById('RightContentPreview');
        target.replaceChildren();
        let previewUrl = URL.createObjectURL(file); // file是上传的文件对象
        let previewEl = document.createElement('object');

        if (isPreviewAllowed(file.type)) {
            // 如果文件类型允许预览，则正常设置data和type属性
            previewEl.setAttribute('data', previewUrl);
            // 注意：这里的type属性应根据file.type动态设置，而非固定为application/pdf
            previewEl.setAttribute('type', file.type); 
            target.insertAdjacentElement('beforeend', previewEl);
            target.classList.add('show', 'active');
        } else {
            // 如果文件类型不允许预览，则添加download属性阻止下载弹窗
            // 同时，可以显示一个自定义的“无预览可用”提示
            previewEl.setAttribute('data', previewUrl); // 仍然设置data，但download会优先
            previewEl.setAttribute('download', 'true'); // 关键：添加download属性

            // 为了更好的用户体验，这里不直接插入object，而是显示提示信息
            let noPreviewMessage = document.createElement('p');
            noPreviewMessage.textContent = '此文件类型暂不支持在线预览。';
            noPreviewMessage.style.color = 'red';
            target.insertAdjacentElement('beforeend', noPreviewMessage);
            target.classList.add('show', 'active');

            // 立即撤销URL对象，避免不必要的资源占用
            URL.revokeObjectURL(previewUrl);
        }
    } else {
        // ...处理错误...
    }
}

/**
 * 判断文件MIME类型是否允许在线预览
 * @param {string} fileType - 文件的MIME类型
 * @returns {boolean} - 如果允许预览则返回true，否则返回false
 */
function isPreviewAllowed(fileType) {
    // 示例：允许图片和PDF文件预览
    return fileType.startsWith('image/') || fileType === 'application/pdf';
    // 可以根据需求扩展支持的MIME类型，例如：
    // return fileType.startsWith('image/') || 
    //        fileType === 'application/pdf' || 
    //        fileType === 'text/plain';
}