pdf文件在浏览器预览有很多方式:
1、ifream:支持base64,blob,url
2、pdf.js插件可以支持
3、vue-pdf可以支持
2和3的方式都是使用插件的方式,网上资料还是比较齐全的有兴趣可以去看看动手实践一下
url预览和url转base64略过
base64文件可以通过下面的方法将文件转换为blob格式
dataURItoBlob(dataURI) { var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型 var byteString = atob(dataURI.split(',')[1]); //base64 解码 var arrayBuffer = new ArrayBuffer(byteString.length); //创建缓冲数组 var intArray = new Uint8Array(arrayBuffer); //创建视图 for (var i = 0; i < byteString.length; i++) { intArray[i] = byteString.charCodeAt(i); } return new Blob([intArray], {type: mimeString}); }
blob格式的文件流可以使用 window.URL.createObjectURL()的方法转换为blob链接来进行展示。
但是以上的方法只有url链接可以在IE浏览器中预览,base64和blob都不行,base64和blob IE不支持,且blob转url链接的方法ie也不支持,可谓奇葩中的奇葩。
ie浏览器想要预览文件流我是没有找到可行的办法的,只有把文件流转换为blob格式后使用
window.navigator.msSaveOrOpenBlob(blob,fileName)
方法,将文件流下载到本地然后让用户自己预览这一条路子