1、将pdf等文件显示到dom元素中预览
- pdf文件可以是
blob、url、file
类型等 - 只要使用
URL.createObjectURL(file)
全部转为URL
即可使用 - 无需借助任何插件,只需要使用
<object></object>
标签即可实现
1.1、html
<template>
<div class="home">
<object id="pdf-object" width="50%" height="500px"></object>
<input type="file" id="pdf-file" />
<button @click="showPDF">预览文件</button>
</div>
</template>
1.2、js
<script>
export default {
name: 'HomeView',
methods: {
showPDF() {
const inputElement = document.getElementById('pdf-file');
const objectData = document.getElementById('pdf-object');
const file = inputElement.files[0];
const url = URL.createObjectURL(file);
objectData.data = url;
}
}
}
</script>
1.3、效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4765d37ffd8fddca34f37cf85df98f8e.gif#pic_center)
1.4、注意
- 如果不是这种file类型,而是后台返回的blob类型数据。
- 那么在接收blob的时候,需要给构造函数传入第二个类型参数
application/pdf
,如下这样
- 如果需要展示其他类型文件,只需修改相应type值即可。
- word、excel、ppt等,不能直接展示,具体原因如下