Vue 前端实现 pdf 文件预览（无插件版）

Vue 前端实现 pdf 文件预览（无插件版）

一、template 中的内容

<iframe
  :src="pdfSrc"
  frameborder="0"
  style="width: 100%; height: 99%"
></iframe>

二、script中的内容

data(){
	return {
		pdfSrc: ''
	}
}

methods: {
    showPDF () {
      // 请求方式：原生、ajax、axios、自定义封装都可以
      this.context
        .getPlugin("http")
        .get(`请求的url`, {
          responseType: "blob", // 注意点1：请求的配置
        })
        .then((response) => {
          // 注意点2：响应内容转换成blob
          let blob = new Blob([response.data], {
             type: "application/pdf;chartset=utf-8"  
           });
           this.pdfSrc = window.URL.createObjectURL(blob)  // 注意点3：生成src
        })
        .catch((error) => {
          console.log(error);
        });
    },
}

三、实现效果