The page after the jump can be displayed, and the links generated by the blog are returned, but the preview is blank, and the console warns: warning: invalid stream: “formaterror: bad fcheck in flat stream: 120, 239”

Follow the source code to see the reason for the warning. There should still be a problem.

Solution:

When Axios requests the document flow, the responsetype is changed to blob

If the responsetype is not modified, JSON is the default in Axios.

If it is set to null in XHR, the default is text, and the link: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/responseType

// originally written here is this.$axios.get(`/api/preview?id=${id}`)
// later found the problem here, $axios is encapsulated axios, did not set the requestType, and I only cross-referenced the returned data is the document stream after ignoring the problem!
// $request is the axios directly thrown out
this.$request({
    methods: 'GET',
    url: `/api/preview?id=${id}`,
    responseType: 'blob'
})
.then(res => {
    console.log(res)
    var blob = new Blob([res.data], {
        type: 'application/pdf;chartset=UTF-8'
    })
    const fileURL = URL.createObjectURL(blob)
    window.open(`${path}pdf/web/viewer.html?file=${fileURL}`)
})
.catch(err => {
    console.log(err)
})