vue开发日记｜使用vue-pdf解决文件流展示pdf的问题

最新推荐文章于 2024-08-09 15:59:10 发布

业余的达莲娜

最新推荐文章于 2024-08-09 15:59:10 发布

阅读量5k

点赞数 4

分类专栏： VUE开发文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_43292438/article/details/121380623

版权

本文介绍如何在Vue项目中使用vue-pdf插件处理后端返回的PDF文件流，包括不分页和分页展示的方式，并解决可能出现的`window is not defined`报错及打包后PDF显示空白的问题。

摘要由CSDN通过智能技术生成

序言

使用vue-pdf插件实现前端pdf在线预览功能，后端返回的不是pdf文件，而是文件流形式的pdf，分享两种展现形式，一种是pdf不分页展示，一种是pdf分页展示。

一、pdf不分页展示

1、下载vue-pdf，在控制台输入

npm install vue-pdf -D

2、html添加标签

<pdf :src="src"> </pdf>

3、模版里引入vue-pdf，

<script>
....
import pdf from 'vue-pdf'
....
</script>

4、相关js

<script>
export default {
  data () {
    return {
      src: ''
    };
  },
  mounted(){
    this.getPdfUrl();
  }
  components: {
    pdf
  },
  method：{
    // 初始化获取pdf文件
    getPdfUrl() {
        let that = this;
        axios({
          method: 'get',
          url: '根据情况自行补充请求的URL',
          responseType: 'blob'  
          //设置响应的数据类型为一个包含二进制数据的 Blob 对象
        }).then(response => {
          that.src  = that.getObjectURL(response.data);
        }).catch(function (error) {
          console.log(error);
        });
      },

      // 将返回的流数据转换为url
      getObjectURL(file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic