vue实现pdf预览功能,vue 展示pdf文件内容
在pdf中预览页面时，由于文件无法打印和下载，很难满足客户的需求。接下来本文介绍vue使用pdf.js预览pdf，有需要的朋友可以参考一下。
当我们在页面上预览pdf文件时，由于有些文件无法打印和下载，此时我们很难使用window自带的pdf来满足客户的需求。因此，我们需要另一种方式来支持我们预览特殊条件的pdf文件。在这里，我用引入pdf.js文件的形式来达到目的。
步骤1:下载pdf.js
pdf.js文件简介
地址：http://mozilla.github.io/pdf.js/getting_started/
第二，vue介绍。
在这里，我将下载的文件放在piblic下的根目录中。
第三步是使用
主地址是/build/generic/web/viewer.html吗？File= href，href是指请求后端返回的文件路径或者后端返回文件流前段解析生成的文件路径，用/build/generic/web/viewer.html拼接？File=，地址是引入pdf.js文件的路径。你也可以直接写/build/generic/web/viewer.html，他会直接去找。下面我用的是前一段解析文件流生成的地址预览。
方法预览window . open(/build/generic/web/viewer . html？file= href)；
axios({
方法：“get”，
网址：网址，
标题：{
token:auth，
},
response type:“blob”，
}).然后(response={
type_=type_。toLowerCase()；
if (type_==docx) {
那个。_ type _= application/vnd . openxml formats-office document . wordprocessingml . document
} else if (type_==doc) {
那个。_type_=application/msword
} else if (type_==gif) {
那个。_type_=image/gif
} else if(type _== JPEG type _== jpg ){
那个。_type_=图像/jpeg
} else if (type_==png) {
那个。_type_=image/png
} else if (type_==pdf) {
那个。_type_=应用程序/pdf
} else if (type_==txt) {
那个。_ type _= text/plain；charset=utf-8
} else if (type_==xls) {
那个。_ type _= application/vnd . ms-excel
} else if (type_==xlsx) {
那个。_ type _= application/vnd . openxml formats-office document . spread sheet ml . sheet
}else if (type_==zip) {
那个。_type_=应用程序/zip
} else if (type_==ppt) {
那个。_ type _= application/vnd . ms-PowerPoint
} else if (type_==pptx) {
那个。_ type _= application/vnd . openxml formats-office document . presentation ml . presentation
}
if(type_==pdf){
var Blob=new Blob([response . data]，{ type: that。_type_ })
var href=窗口。URL . createobjecturl(blob)；//创建下载链接
window . open(/build/generic/web/viewer . html？file= href)；
}
})
最后
如果您想禁用下载和打印pdf文件的功能，最简单的方法是在您自己的导入文件中找到viewer.html，路径是web中build下的generic文件夹下的viewer.html，如下所示：
在这个html中找到对应下载的dom，直接显示为：none。记住你不能把它记出来。如果您这样做，您将报告一个错误。如下图，红框里，一个是下载，一个是打印。直接藏起来就好了。
如果有人问这样不安全，你可以和客户商量不要在页面上显示，因为只要是页面上能看到的东西，截图也可以截下来，这注定是不安全的。
关于vue使用pdf.js预览pdf的这篇文章到此为止。有关vue使用pdf.js预览pdf内容的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。