时间:2021-05-26
最近做项目遇到在线预览和下载pdf文件,试了多种pdf插件,例如jquery.media.js(ie无法直接浏览)
最后选择了pdf.js插件(兼容ie10及以上、谷歌、安卓,苹果)
强烈推荐改插件,以下介绍用法
(1)下载插件
下载路径: pdf.js
(2)将下载构建后的插件放到文件中public(vue/cli 3.0)
(3)在vue文件中直接使用,贴上完整代码
<template> <div class="wrap"> <iframe :src="pSrc" width="100%" height="100%"></iframe> </div></template><script> export default { name: "pdf", data() { return { pSrc:'', }; }, methods: { loadPDF () { //baseurl :pdf存放的文件路径,可以是本地的,也可以是远程,这个是远程的,亲测可以用 let baseurl = 'http://image.cache.timepack.cn/nodejs.pdf'; //ie有缓存加个随机数解决 + '?r=' + new Date() let pSrc = baseurl + '?r=' + new Date(); this.pSrc = '../../plugin/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf'; }, }, mounted: function() { this.loadPDF(); } };</script><style scoped>.wrap{ position: fixed; top: 0; left: 0; width: 100%; bottom: 0;}</style>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下一、引入插件方式一:npminstall--savepdfjs
目的:像elementUI那样注册全局组件预览pdf文件技术支持:使用火狐的pdf.jshttp://mozilla.github.io/pdf.js/准备:新
前言vue中简单使用vue-pdf预览pdf文件,解决打印预览乱码问题vue-pdf使用安装npminstall--savevue-pdf引入importpdf
PDF.js是一款基于HTML5建立的PDF阅读器,兼容大部分主流的浏览器,使用起来,也相对简单。步骤如下:1.下载PDF.js插件下载地址:http://mo
背景之前的demo增加了图片预览,于是今天下午追完番剧就突然想到能不能把pdf在线预览也做了,说干就干,刚开始查了很多教程,我发现很多人都在说什么pdf.js这