困扰我一个晚上的问题,终于解决了,我刚开始选用的ajax来操作结果一直显示空白屏幕,后来用原生,和axios都可以正常显示,贴一下代码吧
node代码 模拟后台 有后台测试可以忽略
var express = require('express')
var router = express.Router()
var fs = require('fs')
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' })
router.post('/getPdf', function(req, res, next) {
// 这里设置是为了让前端访问是预览形式,而不是下载
res.set('Content-Type', 'application/pdf')
fs.readFile('/test.pdf', (err, data) => {
if (err) {
console.log('报错了:', err)
} else {
console.log('传出数据:', data)
// 好多说的是返回data.toString(),但类型会错误,因为是express封装过,直接data返回就好
res.send(data)
第一次试错前端代码,至少用了一个小时反复折腾responseType 是 blob 还是 arraybuffer,结果是ajax请求哪种都不行,赤裸裸的空白pdf在线预览,呵呵!
$.ajax({
url: 'http://127.0.0.1:3000/getPdf',
type: 'POST',
responseType: 'blob',
data: {},
success: function(res) {
var blob = new Blob([res], {
type: 'application/pdf;chartset=UTF-8'
var fileURL = URL.createObjectURL(blob)
window.open(fileURL)
error: function(err) {
console.log('失败:', err)
第二次试错,原生请求,这种直接可以显示出来,但我感觉之前的尝试有点浪费时间了,我想试一下axiso证实一下是ajax的问题
var xhr = new XMLHttpRequest()
xhr.open('POST', 'http://127.0.0.1:3000/getPdf', true)
xhr.responseType = 'blob'
xhr.onload = function() {
if (this.status == 200) {
var blob = this.response
var fileURL = URL.createObjectURL(blob)
var Dom = `<object data="${fileURL}" type="application/pdf" style="width: 400px; height: 400px;"></object>`
$('body').append(Dom)
// window.open(fileURL)
xhr.send()
第三次试错,axios,尝试通过,结论是除了ajax,好像都行
axios({
methods: 'POST',
url: 'http://127.0.0.1:3000/getPdf',
responseType: 'blob'
}).then(res => {
var blob = new Blob([res.data], {
type: 'application/pdf;chartset=UTF-8'
let fileURL= URL.createObjectURL(blob)
// 下载代码
// let downEle = document.createElement('a')
// let fname = `download` //下载文件的名字
// downEle.href = fileURL
// downEle.setAttribute('download', fname)
// document.body.appendChild(downEle)
// downEle.click()
window.open(fileURL)
算是给在线预览给个记录性的方案吧,不太清楚ajax的问题,但总算是能实现功能,打完收工!