vue3 渲染pdf文件流

1. axios请求

axios请求需要添加 responseType 属性 为 blob

/**

 * 预览文件

 */

export const studentPreviewWork = (params?: any) => {

  return request.get({

    url: `/student/previewWork`,

    params,

    responseType: 'blob'

  })

}

2.获取数据

/**
 * 预览文件
 */
const onClick = async (params) => {
  const res = await studentPreviewWork(params)
  const blob = new Blob([res.data], {
    type: 'application/pdf;chartset=UTF-8'
  })
  pdfUrl.value = window.URL.createObjectURL(blob)
  console.log(pdfUrl.value)
  // showPdf.value = true
}

在浏览器导航栏输入pdfUrl的值就可以了

3.可以使用嵌入页面

<div class="pdfView">
        <iframe
          v-if="showPdf"
          ref="iframe"
          id="ifream"
          width="100%"
          height="100%"
          :src="pdfUrl"
        ></iframe>
      </div>

.pdfView {
  width: 500px;
  height: 500px;
}