如何实现pdf文件预览的功能

在实现pdf文件预览时，后端关键代码如下：

File file = new File(url);
byte[] data = Files.readAllBytes(file.toPath());

url就是文件的路径，我们获取的data是将文件的二进制读取到字节数组中，然后data就是我们需要传输到前端的数据。这里并不涉及到任何的编码方式，如utf-8,如果出现了编码方式的报错，那么并不是这里的问题，前端接收到的内容是response.data，只是我们直接打印的话，会是一个乱码的形式，所以我们需要一点特殊的处理：

//获取文章，并在新的窗口打开

function openArticle(id:number){

    axios.get('/articles',{

        params:{

        articleId:id

    },

        responseType:'arraybuffer'

}).then(response => {

        console.log("获取的文章id:"+id)

        // 将 PDF 文件数据转换成 Blob 对象

        const blob = new Blob([response.data], { type: 'application/pdf' });

        // 创建 URL 对象

        const url = window.URL.createObjectURL(blob);

        // 在新标签页中显示 PDF 文件

        const newWindow = window.open(url, '_blank');

    }).catch(error => {

        console.log('发生错误：'+ error)

    })

最为重要的一点就是记得添加：responseType:'arraybuffer'，这样data就会作为二进制数据被接收，否则预览的内容会是空白的。