Vue2 vue-pdf插件

安装 vue-pdf 插件，

npm install --save vue-pdf

<template>
<div class="pdf"><pdf ref="pdf" :src="pdfUrl"> </pdf>
</div>
</template>
<script>
import pdf from "vue-pdf"
export default {components: { pdf },data() {return {pdfUrl: '',};},mounted() {this.getPdf()},methods: {getPdf() {this.$axios.get("http://file.dakawengu.com/file/2018-05-29/20180527-tianfeng.pdf").then((res) => {console.log(res.request.responseURL);this.pdfUrl = res.request.responseURL});},},
};
</script>

当使用 vue-pdf 插件出现跨域问题时，可以如下方式解决，

<script>
import pdf from 'vue-pdf'export default {components: {pdf},data () {return {src: 'https://cdn.mozilla.net/pdfjs/tracemonkey.pdf', // pdf文件地址}},created（） {this.src = pdf.createLoadingTask(this.src)  // 处理跨域问题}
</script>

Vue2系列教程——vue-pdf插件相关推荐

Vue2系列教程——Swiper插件的使用
Vue2 Swiper插件的使用安装swiper 6.7.1 npm install swiper@6.7.1 --save npm install vue-awesome-swiper --sav ...
Vue2系列教程——SSR服务端渲染
Vue2 SSR服务端渲染概念:ssr(server side render)服务端渲染优点: 有利于搜索引擎的SEO操作,由于搜索引擎爬取的是完全渲染出来的页面. 对于网络慢或运行慢的设备,可提 ...
Vue2系列教程——将js ES6兼容IE浏览器
Vue2 将js ES6兼容IE浏览器使用@babel-polyfill,可以将 Vue 中 ES6 的语法转成兼容 IE 内核的语法,配置如下, 安装@babel-polyfill,注意这里要用 ...
[js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 1 window.onload = function () { 2 var c = new Vue({ 3 e ...
Spire.XLS 图表系列教程：C# 如何不使用工作数据创建Excel图表以及Excel雷达图
更多资源查看:Spire.XLS工作表教程 | Spire.Doc系列教程 | Spire.PDF系列教程 [下载Spire.XLS最新试用版] Spire.XLS for .NET 是一款专业的 . ...
（4.2万字，重启2020）“从零到部署”Vue全栈电商应用系列教程---正式完结
作者:一只图雀 Github仓库:(前端[1],后端[2]) 图雀社区主站(首发):图雀社区[3] 博客:掘金[4].知乎[5].慕课[6] 公众号:图雀社区[7] 联系我:关注公众号后可以加图雀酱微 ...
Vue数据代理+事件处理+事件修饰符的作用+计算属性的使用，尚硅谷Vue系列教程学习笔记（2）
尚硅谷Vue系列教程学习笔记(2) 参考课程:<尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通> 参考链接:https://www.bilibili.com/video/ ...
cass插件_南方CASS专题系列，全套教程+视频讲解+插件汇总，全部打包速带走
南方CASS专题系列,全套教程+视频讲解+插件汇总,全部打包速带走 CASS软件是基于CAD平台开发的一套集地形.地籍.空间数据建库.工程应用.土石方算量等功能为一体的软件系统:广泛应用于地形成图.地 ...
Vue.js 系列教程 3：Vue-cli，生命周期钩子
原文:intro-to-vue-3-vue-cli-lifecycle-hooks 译者:nzbin 这是 JavaScript 框架 Vue.js 五篇教程的第三部分.在这一部分,我们将学习 Vue ...
Vue.js 系列教程 4：Vuex
原文:intro-to-vue-4-vuex 译者:nzbin 这是关于 JavaScript 框架 Vue.js 五个教程的第四部分.在这一部分,我们会学习使用 Vuex 进行状态管理.这个系列教程 ...

Vue2系列教程——vue-pdf插件

Vue2 vue-pdf插件

Vue2系列教程——vue-pdf插件相关推荐

最新文章

热门文章