pdfh5-移动端pdf预览
pdfjs在pc端预览:https://www.cnblogs.com/wuqilang/p/13031290.html
当使用pdfjs在移动端预览时显示不出来,pc端调式是可以的,到了手机上 就不行。
使用pdfjs:
1、下载:npm install pdfh5
2、使用:
<template> <div style="height:100vh;" ref="pdfRef"></div> </template> <script> import Pdfh5 from 'pdfh5' import 'pdfh5/css/pdfh5.css' export default { mounted() { const pdfh5 = new Pdfh5(this.$refs.pdfRef, { pdfurl: 'http://filegateway.test.mistong.com/api/filecenter/fileService/file/947631061519778296.pdf' }) // 监听完成事件 pdfh5.on('complete', function (status, msg, time) { console.log( `状态:${status},信息:${msg},耗时:${time}毫秒,总页数:${this.totalNum}` ) }) } } </script>
自带的download方法,在手机上各个浏览器表现不一致,推荐使用自定义的下载方法:
export function downloadUrl(url,fileName){ let title = fileName; let urlName = url.split('/'), urlNameLen = urlName.length-1; if(!title){ title = urlName[urlNameLen] } fetch(url) // 获取 blob 对象 .then(res=>res.blob()) .then(blob=>{ var link = document.createElement('a'); link.style.display = 'none'; document.body.appendChild(link); var url = window.URL.createObjectURL(blob); link.href = url; link.download = title; link.click(); //下载完成后清理URL对象和a标签 window.URL.revokeObjectURL(url); document.body.removeChild(link); }) }