vue预览pdf 兼容IE11
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
运用vue项目开发遇到预览PDF的功能并要兼容IE11,最开始运用vue-pdf这个插件,后来发现在IE11浏览器不支持。所以使用了pdfjs-dist,下边上代码。
// 安装pdfjs-dist
npm install pdfjs-dist@2.0.943 --save //这里安装这个版本是最为合适的 其他版本可能会出现一些问题
// 安装完成后一定要记得重启项目
// 视图代码 css样式自行去写
<div>
<div>
<span>{{ "pdf" }}</span>
<span>
<img src="@/assets/shape_left.png" alt="" @click="reduceCurrentPage" />
<!-- 这是个上一页图标 -->
{{ current }}/{{ total }}
<img src="@/assets/shape_right.png" alt="" @click="addCurrentPage" />
<!-- 这是个下一页图标 -->
</span>
</div>
<canvas id="the-canvas"></canvas> <!-- 展示pdf的视图容器 -->
</div>
// 接下来在需要的地方引入插件
// 在script中进行引入
const PDF = require("pdfjs-dist")
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry"
PDF.GlobalWorkerOptions.workerSrc = pdfjsWorker
// 然后进行在data中定义一些变量
data(){
return {
total: 0, // 拿到的pdf总页数
current: 1, // 拿到的pdf当前页数
pdfUrld: "", // pdf文件路径变量
}
}
//pdf渲染函数
// pageSize为要展示的页数,自己定义上一页下一页函数, url是pdf文件的路径
init(pageSize, url) {
const padUrlsd = url || this.pdfUrld
var loadingTask = padUrlsd
PDF.getDocument(loadingTask).then((pdf) => {
this.total = pdf._pdfInfo.numPages
pdf.getPage(pageSize).then(function(page) {
var viewport = page.getViewport(1.5)
var canvas = document.getElementById("the-canvas")
var context = canvas.getContext("2d")
canvas.height = viewport.height
canvas.width = viewport.width
var renderContext = {
canvasContext: context,
viewport: viewport
}
page.render(renderContext)
})
})
}
// 初始话的时候在created生命周期只需要拿到pdf文件路径然后调用 this.init(1,"拿到的文件路径") 就可以
注意 IE11是不支持baseurl这种形式的文件路径的,如果后端给你的文件路径是baseurl形式的 可以去看我的其他文章 有把baseurl转换为blob路径的方法,希望这篇文章能对各位有所帮助
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)