3、vue实现pdf预览（本地文件地址转为url）

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、运行效果图