vue 如何显示后端传过来的pdf文件
时间: 2024-04-04 11:33:08 浏览: 13
要在 Vue 中显示后端传递的 PDF 文件,可以使用 `<embed>` 标签或 `<object>` 标签。
下面是使用 `<embed>` 标签的示例代码:
```html
<template>
<div>
<embed :src="pdfUrl" type="application/pdf" width="100%" height="600px">
</div>
</template>
<script>
export default {
data() {
return {
pdfUrl: 'http://backend.com/file.pdf'
}
}
}
</script>
```
在上面的代码中,我们使用了 `:src` 绑定了 PDF 文件的 URL,使用 `type="application/pdf"` 声明了文件类型,使用 `width` 和 `height` 属性设置了 PDF 文件的宽度和高度。
你也可以使用 `<object>` 标签来实现同样的效果:
```html
<template>
<div>
<object :data="pdfUrl" type="application/pdf" width="100%" height="600px">
<embed :src="pdfUrl" type="application/pdf" width="100%" height="600px" />
</object>
</div>
</template>
<script>
export default {
data() {
return {
pdfUrl: 'http://backend.com/file.pdf'
}
}
}
</script>
```
在上面的代码中,我们使用了 `<object>` 标签来包含 `<embed>` 标签,以便在某些浏览器中更好地支持 PDF 文件的显示。