vue项目读取显示pdf文件

项目需求：展示pdf条款。

方法的实现：使用 iframe 标签

代码段：

数据

 data（）{
    return{
        detail: [
        {
          name: '条款1',
          to: './public/pdf_tk.pdf',
          type: 'pdf',
        },
        {
          name: '条款2',
          to: '这里显示pdf文件路径',
          type: 'pdf',
        },
        {
          name: '条款3',
          to: '这里显示pdf文件路径',
          type: 'pdf',
        },
       ],

    }
}

html文本

      
      

        

          

            //使用ifram 显示 pdf文件 获取文件地址
            
          
        
      
      
      

        
《条款》
            

              

                
{{ item.name }}
                

              
            
      

methods里写的方法

    clClick(item) {
      try {
        if (item.type === 'pdf') {
          let frame = document.getElementById('iframe');
          let frameChild = document.getElementById(this.pdfId);
          frame.removeChild(frameChild);
          this.url = '../../pdfview/pdf_index.html?file=' + item.to;
          // this.pdfId = 'pdf';
          this.pdfId = 'pdf'
          console.log(this.url, 222222, this.pdfId);
          let iframe = ``;
          console.log(iframe, 111);
          frame.innerHTML = iframe;
        }
      } catch (e) {
        console.log(e);
      }
    },