Vue.js开发技巧

vue使用iframe展示PDF图片:

2020-08-30  本文已影响0人  不语u

一、创建一个iframe

<iframe :src="payurl"
              width="100%"
              height="680"
              frameborder="0">
</iframe>

二、请求数据并展示

RequsetPdf(url, error, str) {
      axios({
        method: 'get',
        url: url,
        responseType: 'arraybuffer', //一定要设置响应类型,否则页面会是空白pdf
        params: {请求的参数},
      })
        .then((res) => {
          let result = res.data
          var binaryData = []
          binaryData.push(result)
          //解析文件类型为pdf类型的文件流
          let Blobs = new Blob(binaryData, { type: 'application/pdf' })
          //生成一个blob链接
          this[str] = URL.createObjectURL(Blobs)
        })
        .catch((err) => {
          console.log(error)
          this.$message.error(error)
        })
    },
上一篇下一篇

猜你喜欢

热点阅读