如何使用爱站网,网络推广,新会新闻官网,中建南方建设集团官方网站第一步 引入vue-pdf
npm install --save vue-pdf
第二步 按照需求我们慢慢进行
01.给你一个pdf文件的url#xff0c;需要在页面渲染
代码
templatedivpdfrefpdf:srcurl/pdf/div
/template
需要在页面渲染
代码
templatedivpdfrefpdf:srcurl/pdf/div
/template
script
import pdf from vue-pdf
export default {components: {pdf},data() {return {url: http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf,}}
}
/script这只是初体验如果你的pdf只有一页这样写当然没什么问题但是当我们呢pdf 有很多页的时候你会发现这行不通了。所以接下来我们来看看怎么让它显示多页。
02.渲染多页面的pdf
templatedivpdf v-fori in numPages :keyi :srcurl :pagei/pdf/div
/templatescript
import pdf from vue-pdf
export default {components: {pdf},data() {return{url: ,numPages: 1,pdf: }},created() {this.pdf require(vue-pdf)console.log(获取的pdf, this.pdf)},mounted: function() {this.getNumPages(http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf)},methods: {getNumPages(url) {var loadingTask pdf.createLoadingTask(url)// var loadingTask this.pdf.default.createLoadingTask(url)loadingTask.promise.then(pdf {this.url loadingTaskthis.numPages pdf.numPages}).catch((err) {console.error(pdf加载失败)})},}
}
/script
这里边如果你省去了promise控制台会报错如下 vue.runtime.esm.js:4605 [Vue warn]: Error in mounted hook: TypeError: loadingTask.then is not a function 还有需要了解的是你的 vue-pdf对象可以通过import去引也可以通过require去引
各个属性
url pdf 文件的路径可以是本地路径也可以是在线路径。numPages pdf 文件总页数。
getNumPages 计算总页数顺便给url和numPages赋值。
注意啊这句不一定非要写到mounted里面你想写哪就写哪比如你前端请求后端后端返回一个pdf 的url在那里写就行写在你需要的地方。
03.想不想让你的pdf带有分页交互及打印的功能直接代码
templatedivdiv classtools styledisplay: flex;justify-content: center;margin: 30pxel-button :themedefault typesubmit :title基础按钮 click.stopprePage classmr10 上一页/el-buttonel-button :themedefault typesubmit :title基础按钮 click.stopnextPage classmr10 下一页/el-buttondiv classpage stylemargin-top: 10px{{pageNum}}/{{pageTotalNum}} /divel-button :themedefault typesubmit :title基础按钮 click.stopclock classmr10 顺时针/el-buttonel-button :themedefault typesubmit :title基础按钮 click.stopcounterClock classmr10 逆时针/el-button/divpdf refpdf:srcurl:pagepageNum:rotatepageRotateprogressloadedRatio $eventpage-loadedpageLoaded($event)num-pagespageTotalNum$eventerrorpdfError($event)link-clickedpage $event/pdf/div
/template
script
import pdf from vue-pdf
export default {name: Home,components: {pdf},data() {return {url: http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf,pageNum: 1,pageTotalNum: 1,pageRotate: 0,// 加载进度loadedRatio: 0,curPageNum: 0,}},mounted: function() {},methods: {// 上一页函数prePage() {var page this.pageNumpage page 1 ? page - 1 : this.pageTotalNumthis.pageNum page},// 下一页函数nextPage() {var page this.pageNumpage page this.pageTotalNum ? page 1 : 1this.pageNum page},// 页面顺时针翻转90度。clock() {this.pageRotate 90},// 页面逆时针翻转90度。counterClock() {this.pageRotate - 90},// 页面加载回调函数其中e为当前页数pageLoaded(e) {this.curPageNum e},// 其他的一些回调函数。pdfError(error) {console.error(error)},}
}
/script
page: 当前显示的页数比如第一页page1rotate 旋转角度比如0就是不旋转90-90 就是水平旋转。progress 当前页面的加载进度范围是0-1 等于1的时候代表当前页已经完全加载完成了。page-loaded 页面加载成功的回调函数不咋能用到。num-pages 总页数error 加载错误的回调link-clicked单机pdf内的链接会触发。
04.加载本地pdf的功能
先安装file-loader: npm install --save file-loader 然后在vue.config.js中加入以下内容
module.exports {chainWebpack: config {const fileRule config.module.rule(file)fileRule.uses.clear()fileRule.test(/\.pdf|ico$/).use(file-loader).loader(file-loader).options({limit: 10000,})},publicPath: ./
}之后再url:require(../assets/1.pdf)就没有任何问题了注意vue-pdf src接收的是string对象如果直接传url我这里报错了你可能需要传url.default一下。
其他
打印界面字符乱码
这个我倒是碰到了谷歌浏览器打印的时候预览界面真的变成了 真·方块字 全是方块。这个问题是因为你pdf中使用了自定义字体导致的具体解决方案如下
首先找到这个文件node_modules/vue-pdf/src/pdfjsWrapper.js
然后根据github上这个issue其中红色的是要删掉的绿色的是要加上去的照着改就可以解决了。
地址 github.com/FranckFreib…
根据我的实际测试是可以解决打印乱码的问题的。
跨域问题
网上用pdf.js 很多都会遇到跨域问题这个我今天实际应用到自己的项目里面了由于我服务端设置了跨域所以没有出现跨域的问题如果出现跨域需要修改你后端的请求头。 写到这里已经是下班了感谢老铁们的点赞你们的点赞是我努力进步的动力
