Advertisement

前端开发Vue技术支持PDF预览功能

阅读量:

一、使用a标签

复制代码
    <a href="http://xxx.xx.cn/test1.pdf">pdf</a>
    
    
      
    

需特别注意的是,所使用的href地址必须指向文件的完整路径,而非相对路径。若将url设置为"…/assets/pdf/test1.pdf",则无法正确访问到对应的PDF文件。当用户点击该链接时,系统将在新窗口中打开并预览PDF文件,其效果与直接在浏览器中输入文件地址进行访问完全一致。

二、使用iframe标签

复制代码
    <div class="iframe-pdf">
    		<iframe src="http://xxx.xx.cn/test1.pdf"></iframe>
    		<iframe src="http://xxx.xx.cn/test2.pdf"></iframe>
    </div>
    
    
      
      
      
      
    

该方式能够使PDF文档直接呈现在页面之上

三、使用pdfjs-dist插件

复制代码
    <template>
      <div>
    <div id="the-canvas"></div>
      </div>
    </template>

全部评论 (0)

还没有任何评论哟~