vue-pdf 预览流数据 (可保证接口安全)

@GetMapping(value = "/previewPDF/{orderNumber}")
    public void previewPdf(@PathVariable String orderNumber, HttpServletResponse response)  {

        response.reset();

        response.setContentType("application/pdf;charset=utf-8");

        String userId =  orderService.getClientUserIdByOrderNumber(orderNumber);


        byte[] fileBytes = contractService.getContractFile(userId, orderNumber);

        try (ServletOutputStream outputStream = response.getOutputStream()) {

            outputStream.write(fileBytes);
            outputStream.flush();
        } catch (Exception e) {

            throw new NatergyShopBindException("文件输出失败");
        }
    }

导入vue-pdf组件

    viewPdf () {
      this.$http({
        url: this.$http.adornUrl(`/shop/contract/previewPDF/${this.dataForm.orderNumber}`),
        method: 'get',
        responseType: 'blob'
      }).then(({ data }) => {
        this.pdfSrc = this.conversionStreamToUrl(data)
        this.viewPDFVisible = true
      })
    },
    conversionStreamToUrl (data) {
      let url = null
      let file = new Blob([data], {type: 'application/pdf;chartset=utf-8'})
      if (window.createObjectURL !== undefined) {
              // 通用
        url = window.createObjectURL(file)
      } else if (window.webkitURL !== undefined) {
              // 兼容谷歌
        try {
          url = window.webkitURL.createObjectURL(file)
        } catch (error) {

        }
      } else if (window.URL !== undefined) {
              // 兼容其他
        try {
          url = window.URL.createObjectURL(file)
        } catch (error) {

        }
      }
            // 将转化后url赋值
      return url
    }

你可能感兴趣的:(vue-pdf 预览流数据 (可保证接口安全))