美文网首页Vue.js开发技巧
vue使用iframe展示PDF图片:

vue使用iframe展示PDF图片:

作者: 不语u | 来源:发表于2020-08-30 13:19 被阅读0次

    一、创建一个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)
            })
        },
    

    相关文章

      网友评论

        本文标题:vue使用iframe展示PDF图片:

        本文链接:https://www.haomeiwen.com/subject/gyqesktx.html