两种处理从服务器获取的PDF Blob数据的方法

this.silentJSONPrint =function(printCode, params, postData) {
        console.log(printCode, params, postData)
        const that = this;
        return new Promise(function(resolve, reject) {
            var url = that.pdf(printCode, params);
            var printUrl = that.opts.printUrl;
            console.log('printUrl',printUrl,'url',url)
            axios({
                url: url,
                method: 'POST',
                data: postData,
                headers: { 
                    'Content-Type': 'application/json;charset=UTF-8' 
                },
                responseType: 'blob',
            }).then(res => {
                console.log('res',res)
                console.log('Blob size:', res.data.size);
                const downloadElement = document.createElement('a');
                try {
                    downloadElement.href = window.URL.createObjectURL(res.data)
                } catch (error) {
                    console.log('error',error)
                    downloadElement.href = res.config.url
                }
                downloadElement.target = '_blank'
                document.body.appendChild(downloadElement)
                console.log('downloadElement',downloadElement)
                downloadElement.click()
                // const blob = new Blob([res.data], { type: 'application/pdf' });  
                // const blobUrl = window.URL.createObjectURL(blob);   
                // const newWindow = window.open();  
                // if (newWindow) {  
                //     // 设置新标签页的location.href为Blob URL  
                //     newWindow.location.href = blobUrl;  
                //     window.URL.revokeObjectURL(blobUrl);
                //     resolve(blobUrl);   
                // } else {  
                //     // 弹窗被阻止等情况的处理  
                //     reject(new Error('Failed'));  
                // }  
                //     resolve(res);
                // }).catch(err => {
                //     reject(err)
                //     console.log('err',err)
                });
        })
    }

展示了两种处理从服务器获取的PDF Blob数据的方法：

1. 第一种方法（直接下载）：
   • 创建一个<a>元素（downloadElement）。
   • 将其href属性设置为Blob的URL。
   • 将<a>元素添加到文档体中。
   • 模拟点击<a>元素来触发下载。
   优点：
   • 简单直接，用户通常会看到浏览器的下载提示。
   • 不需要额外的浏览器窗口或标签页。
   缺点：
   • 如果用户不希望下载文件，而是希望预览，这种方法就不适用了。
   • 如果浏览器配置阻止自动下载，这种方法可能会失败。
2. 第二种方法（在新标签页中预览）：
   • 创建一个Blob对象。
   • 创建一个Blob的URL。
   • 在新标签页中打开并设置其location.href为Blob URL。
   优点：
   • 允许用户在新标签页中预览PDF，而不是直接下载。
   • 提供了更好的用户体验，特别是当用户只想预览文件时。
   缺点：
   • 需要打开一个新的浏览器标签页。
   • 如果用户禁用了弹出窗口，或者浏览器设置限制了这种行为，则无法在新标签页中打开PDF。
   • 如果Blob数据很大，打开新标签页并加载PDF可能会消耗更多的系统资源。
   • 需要手动管理Blob URL的生命周期（虽然在这个特定的例子中，由于是在新标签页中使用，通常不需要手动释放）。

哪种方式更好？

这取决于您的应用需求以及目标用户的偏好。

• 如果您希望提供一个简单的下载机制，并且不关心用户是否预览文件，那么第一种方法可能更适合。
• 如果您希望提供一个更好的用户体验，允许用户在新标签页中预览PDF（特别是在移动设备上），那么第二种方法可能更好。

在实际应用中，您可能还想考虑提供一种方式来让用户选择是直接下载还是预览PDF。这可以通过添加用户界面元素（如按钮或复选框）来实现，这些元素可以触发不同的处理逻辑。