打开PDF去除下载按钮(pdf.js)

最近在做一个打开pdf只要预览不要下载的功能,浏览器打开的话会有一个下载按钮,但是我不想要这个按钮,找了好久没找到去掉这个按钮的方法,最后我选择了用pdf.js。

其实pdf.js用起来还是挺简单的:

链接: https://pan.baidu.com/s/1itCT9_AK2HBPNxIC9fvV5w 提取码: ymtk

下载后解压,然后放到web工程里面

首先打开web目录下的viewer.html文件,把下载按钮隐藏,其实这样还达不到取消下载的目的,往下看

再到打开web目录下的viewer.js文件,把1564这行注释掉,取消下载按钮目的就达到了,但你会发现Ctrl+s还是可以保存的,再把2379,2380这两行注释掉就可以了。

 

使用起来放到iframe标签里面:

$("#test").attr("src","../hplus/pdf/web/viewer.html?file=" + encodeURIComponent("/test/testPdf?id="+id));

如果是直接访问指定pdf的

<a href="../hplus/pdf/web/viewer.html?file=test.pdf">

最后下载的那个代码这些地方我是改过的了,除了上面说的这些地方改过其他地方都没改过。

在Vue.js应用中使用PDF.js库来显示PDF文件并获取当前页码,首先需要安装`pdfjs-dist`库。你可以通过npm或者yarn来安装: ```bash npm install pdfjs-dist # 或者 yarn add pdfjs-dist ``` 然后,在你的Vue组件里,可以创建一个PDF查看器,并添加一个方法来获取当前页码。这里是一个简单的例子: ```html <template> <div> <canvas ref="pdfCanvas"></canvas> <button @click="getPdfPage">获取当前页码</button> </div> </template> <script> import { PDFViewer } from 'pdfjs-dist/web/pdf_viewer.js'; export default { data() { return { pdfUrl: 'path/to/your/pdf.pdf', // 替换为你PDF的实际路径 pageCount: null, }; }, mounted() { this.loadPdf(); }, methods: { async loadPdf() { const loadingManager = new PDFLoadingManager(); loadingManager.setVerbosity(PDFLoadingManager.LOADING_PROGRESS); const pdfJSWorker = await PDFJS.getDocument({ url: this.pdfUrl, loadingManager, }); this.pdfDocument = pdfJSWorker.getDoc(); this.pageCount = this.pdfDocument.numPages; // 创建PDF视图 const container = document.getElementById('pdfCanvas'); const viewer = new PDFViewer(container, { useDownloadButton: false, // 如果不需要下载按钮,可以去掉这行 }); // 加载第一个页面 await viewer.loadPage(1); }, getPdfPage() { if (this.currentLoadedPage) { console.log(`当前页码: ${this.currentLoadedPage.number}`); } else { console.log('加载PDF前,请先点击“加载PDF”'); } }, }, }; </script> ``` 在这个例子中,我们首先设置了PDF文件的URL,然后在`mounted`生命周期钩子中加载PDF。`loadPdf`方法会初始化PDF文档、计算总页数,并创建一个PDF Viewer实例。`getPdfPage`方法会在每次点击按钮时打印出当前加载的页码。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值