当前位置:   article > 正文

vue使用iframe标签预览本地pdf文档_ifream预览选中的文件

ifream预览选中的文件
  1. 创建测试的pdf文档,将文件放在public目录下
    注意:不要在vscode内直接创建pdf文件添加内容,否者会读不出pdf文档
  2. 使用
    <template>
    	<el-button @click='dialogVisible = true'>点击查看文档<el-button>
    		<el-dialog :close-on-click-modal='false' title="查看文档" :visible.sync="dialogVisible" :fullscreen="true">
    			<iframe :src="pdfUrl" width="100%" height="100%"></iframe>
    		</el-dialog>
    </template>
    data(){
    	return{
    		dialogVisible:false,
    		pdfUrl:process.env.BASE_URL + '文件名称.pdf',
    		// 将文档放在public目录下时 直接使用 '/文件名称.pdf'会导致打包后无法访问文档
    	}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/486514
推荐阅读
相关标签
  

闽ICP备14008679号