vue 在线预览pdf文件

说明:PDFjs使用的是低版本的

下载地址:百度网盘下载。​​​​​提取码:p6xb

  1. 官方地址:PDF.js
  2. 使用方法:

            放在public文件下,在pdf文件里会有viewer.html文件。

1.在微信浏览器中使用需做判断,在ios系统中文档可直接打开,android做需要跳转浏览器中下载打开

2.判断手机系统,打开的方式不同

const value = this.$route.query.name;      
const ua = navigator.userAgent.toLowerCase();
let pd = false
/android/.test(ua) ? pd = true : ''

 3.在android中使用window.open预览文件,这里的/static是设置的的代理,你也可以使用https进行预览

window.open(`/pdf/web/viewer.html?file=/static/pdf/`+value)

3.在iso中window.open功能被限制了,需要用户点击一下才能查看

window.open('https://www.xxxxx.com/xxx'+value)

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用pdf.js来在Vue应用程序中预览PDF文件pdf.js是一个开源的JavaScript库,可在Web浏览器中显示PDF文档。 以下是一个简单的Vue组件,使用pdf.js来预览PDF文件: ```vue <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { props: { url: { type: String, required: true } }, mounted() { this.renderPdf() }, methods: { async renderPdf() { const pdf = await pdfjsLib.getDocument(this.url).promise const page = await pdf.getPage(1) const viewport = page.getViewport({ scale: 1 }) const canvas = this.$refs.canvas const context = canvas.getContext('2d') canvas.width = viewport.width canvas.height = viewport.height await page.render({ canvasContext: context, viewport: viewport }) } } } </script> ``` 在这个组件中,我们首先引入了pdfjsLib库,然后在mounted钩子中调用renderPdf方法来渲染PDF文件。在renderPdf方法中,我们首先通过pdfjsLib.getDocument方法获取PDF文档对象,然后通过getPage方法获取第一页的页面对象,并使用getViewport方法获取页面的视口对象。接下来,我们使用canvas元素来呈现PDF页面,并使用page.render方法将页面呈现到canvas上。 你可以像这样在其他Vue组件中使用这个组件: ```vue <template> <div> <PdfViewer url="your-pdf-url"></PdfViewer> </div> </template> <script> import PdfViewer from './PdfViewer.vue' export default { components: { PdfViewer } } </script> ``` 这个组件可以在浏览器中预览PDF文件,但是在生产环境中,你需要将pdf.js和pdf.worker.js文件放到你的web服务器上,并通过script标签加载它们。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值