微信公众号或者浏览器实现在线浏览pdf文件

微信公众号或者浏览器实现在线浏览pdf文件
实现在线浏览pdf文件方法
开发步骤:
实现在线浏览pdf文件方法
我们在日常的开发当中经常需要实现pdf文件的显示,最近做了一个在微信公众号中实现pdf浏览,因为微信浏览器是基于H5的,所以这个也支持别的浏览器。其实方法很简单,主要需要一个插件pdf.js。你可以直接去官网下载或者在GitHub上有很多还有模板。pdf.js 是一个主要用于HTML5 平台上在线阅读PDF文档的小插件,基于JavaScript技术编写而成,无需任何本地技术支持。
到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ )

开发步骤:
下载之后直接放到你的项目中,放在js文件夹里面就行。这个里面需要你关注的文件主要是viewer.html、pdf.js和viewer.js。在web下面有一个compressed.tracemonkey-pldi-09.pdf文件,这个是用来测试的文件。现在运行你的程序可以直接打开viewer.html这个页面就会在线浏览pdf文件。
在这里插入图片描述

现在运行你的程序可以直接打开viewer.html这个页面就会在线浏览pdf文件。
在这里插入图片描述

这个是配置pdf文件的地方。
在这里插入图片描述

如果我们的pdf需要在本地获取或者是文件服务器获取,我们就将这里直接去空。
在这里插入图片描述

在viewer.js中,我们发现他可以通过file参数来指定pdf的路径。
在这里插入图片描述

这里我们可以直接跳转到viewer.html,通过window.location.href=“product-descritption-pdf.html?fileContent=”+fileContent; fileContent是你的pdf文件路径。如果是本地的你可以直接在把路径赋给fileContent=“C:\Users\Administrator\Desktop\allss\pdf01 \web\compressed.tracemonkey-pldi-09.pdf”。如果是从文件服务器获取的话,你先要从后台获取到文件服务器的pdf地址然后返给前端就行了。
在这里插入图片描述

最后,如果你要从本地或者是文件服务器获取pdf文件,可能会出现跨域问题。其实跨域问题很好解决。看我的另一篇博客:https://blog.csdn.net/weixin_42276004/article/details/89225757

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue.js 是一款流行的 JavaScript 框架,可以用来开发单页应用程序(SPA)。如果你想在微信公众号浏览 PDF,可以使用 Vue.js 和第三方库实现。 你可以使用 pdf.js 库来加载和显示 PDF 文件,同时使用 Vue.js 来编写前端代码。pdf.js 支持在浏览器直接加载 PDF 文件,也可以将 PDF 文件转换成 base64 编码字符串后使用。 以下是一个简单的示例代码: ```html <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { mounted() { this.loadPdf() }, methods: { async loadPdf() { const pdfData = await this.getPdfData() const canvas = this.$refs.canvas const pdf = await pdfjsLib.getDocument({ data: pdfData }).promise const page = await pdf.getPage(1) const viewport = page.getViewport({ scale: 1 }) canvas.height = viewport.height canvas.width = viewport.width const context = canvas.getContext('2d') const renderContext = { canvasContext: context, viewport: viewport } await page.render(renderContext).promise }, async getPdfData() { // 使用 ajax 或者 fetch 获取 PDF 文件的 base64 编码字符串 // 这里简单起见直接使用示例文件 const response = await fetch('https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf') const arrayBuffer = await response.arrayBuffer() return new Uint8Array(arrayBuffer) } } } </script> ``` 该代码中的 `loadPdf` 方法会加载 PDF 文件并将其渲染到 `canvas` 标签中。你可以将其作为组件在 Vue.js 项目中使用,然后将组件插入到微信公众号的页面中即可。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值