vue-pdf插件的使用，并通过Java后端文件流的方式解决vue跨域问题

安装

npm install --save vue-pdf

简单用法

直接上代码-前端写法

<template>
  <div>
    <pdf :src="pdfUrl">
    </pdf>
  </div>
</template>
<script>
  import pdf from 'vue-pdf'
  import { getPdf } from "../../api/test/test";

  export default {
    name: 'Pdf',
    components: {
      pdf
    },
    data() {
      return {
        pdfUrl: null,
        numPages: 1
      }
    },
    created() {
      this.getpdf()
    },
    methods: {
      getpdf() {
        const that = this;
        let formData = new FormData();
        formData.append("pdfUrl", "https://dakaname.oss-cn-hangzhou.aliyuncs.com/file/2018-12-28/1546003237411.pdf");
        getPdf(formData).then(data => {
          that.pdfUrl = that.getObjectURL(data);
          console.log("pdfUrl", that.pdfUrl);
        });
      },
      // 将返回的流数据转换为url
      getObjectURL(file) {
        let url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          try {
            url = window.webkitURL.createObjectURL(file);
          } catch (error) {
            console.log(error)
          }
        } else if (window.URL != undefined) { // mozilla(firefox)
          try {
            url = window.URL.createObjectURL(file);
          } catch (error) {
            console.log(error)
          }
        }
        return url;
      },
    }
  }
</script>

前端请求方式

import request from '@/utils/request'


export function getPdf(data) {
  return request({
    url: '/test/getPdf',
    method: 'post',
    responseType: 'blob', //非常关键
    data: data
  })
}

Java后端文件流的方式解决vue跨域问题

package com.ruoyi.web.controller.test;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.net.HttpURLConnection;
import java.net.URL;

/**
 * @author lanren
 * @Description
 * @date 2020/12/11
 */
@RestController
@RequestMapping("/test")
public class TestApiController {

    @RequestMapping(value = "/getPdf", method = {RequestMethod.GET, RequestMethod.POST})
    public void getPdf(String pdfUrl, HttpServletRequest req, HttpServletResponse resp) {
        if (pdfUrl == null) {
            pdfUrl = "";
        }
        resp.setContentType("application/pdf");
        OutputStream sos = null;
        BufferedInputStream bis = null;
        try {
            sos = resp.getOutputStream();
            String destUrl = pdfUrl;
            URL url = new URL(destUrl);
            HttpURLConnection httpUrl = (HttpURLConnection) url.openConnection();
            //连接指定的网络资源
            httpUrl.connect();
            //获取网络输入流
            bis = new BufferedInputStream(httpUrl.getInputStream());
            int b;
            while ((b = bis.read()) != -1) {
                sos.write(b);
            }
        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            try {
                sos.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
            try {
                bis.close();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

导入

插件GitHub