PDF文件在线预览

Jquery下的AJAX请求文件流的PDF预览

$.ajax({
	url: 'http://127.0.0.1:3000/getPdf', // 这里写入接口地址
	method: 'get', // 请求方式，这里我用的是get
	data: {Id:id}, // 这里是请求的参数
	mimeType: 'text/plain;charset=x-user-defined',//请求文件流的方式
	success: function (res) {
		// 这里可以处理预览时pdf文件空白
		let resLength = res.length
		let arr = new Uint8Array(new ArrayBuffer(resLength))
		for (let i = 0; i < resLength; i++) {
			arr[i] = res.charCodeAt(i)&0xff;
		}
		// 这边是转换成二进制流
		let blob = new Blob([arr], {
			type: 'application/pdf;charset=UTF-8'
		})
		const pdfView = window.URL.createObjectURL(blob)
		window.open(pdfView) // 在浏览器打开一个页签进行预览
	},
	error: function (err) {
		console.log('失败：', err)
	}
})

原生请求下的PDF文件预览

let xhr = new XMLHttpRequest();
let url = 'http://127.0.0.1:3000/getPdf?Id='+id;
xhr.open('get', url);
xhr.responseType = 'blob';
xhr.onload = function () {
	if (this.status === 200) {
		let blob = this.response;
		const pdfView = window.URL.createObjectURL(blob);
		window.open(pdfView) // 在浏览器打开一个页签进行预览
	}
}
xhr.send();

axios请求下的PDF预览

axios({
	methods: 'post',
	url: '',
	responseType: 'blob',
}).then(res => {
	let blob = new Blob([arr], {
		type: 'application/pdf;charset=UTF-8'
	})
	const pdfView = window.URL.createObjectURL(blob)
	window.open(pdfView) // 在浏览器打开一个页签进行预览
})