1、在iframe预览pdf标签中:
<iframe
:src="url"//绑定data中的url
frameborder="0"
width="100%"
height="100%"
></iframe>
当地址来自本地上传的文件时需要加一个上传按钮,这里用element-ui里面的upload实现
<el-upload
action="localhost.8080"
//需要在script中定义httpReques函数,内容随便,哪怕是console.log(123),因为
//:http-request代表的是覆盖掉上面的action行为,所以action里面的地址也可以乱填
//,因 为定义了这个函数
:http-request="httpRequest"
:show-file-list="false" //展不展示文件列表
accept=".pdf" //表示接收文件类型
:before-upload="beforeUpload" //这个函数下面第三部分有
>
<el-button type="primary">上传文件</el-button>
</el-upload>
2、在data数据部分
url: "",
3、在script里面定义一个函数=>转本地地址为网络地址,从而实现预览
beforeUpload(file, fileList) {
if (window.createObjectURL != undefined) {
this.url = window.createObjectURL(file);
} else if (window.URL.createObjectURL(file)) {
this.url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
this.url = window.webkitURL.createObjectURL(file);
}
console.log(this.url);
},
4、运行效果图