前端js打开pdf文件--文件通过浏览器打开，以pdf形式进行预览

通过点击button按钮，触发 @click="openPDF(performance_report)"方法，把对应需要展示的pdf传送到openPDF()方法内，这里的pdf文件格式必须包括id、name、url。

在这里，performance_report为预览的文件：

    <div><el-button type="text" size="mini" @click="openPDF(performance_report)">测试报告</el-button></div>


<script>export default {components: {},data() {return {performance_report: [{id: null,//文件的idname: "",//文件的名称url: "",//文件的url}, ],};},created() {},mounted() {},computed: {},methods: {//打开的文件一般是在后端存储的，从后端取到文件后，把文件传输到openPDF方法，用val接收即可。openPDF(val) {axios({method: "get",url: val[0].url,params: {fileId: val[0].id,},responseType: "blob",}).then((res) => {console.log("res", res);if (res.status == "500") {this.$message({message: "下载失败！",type: "error",});return;}//文件以pdf形式进行预览let blob = new Blob([res.data], {type: "application/pdf;chartset=UTF-8",});let fileURL = URL.createObjectURL(blob);// this.fileURLOther = fileURL;window.open(fileURL);});}}}
</script>

前端js打开pdf文件--文件通过浏览器打开，以pdf形式进行预览相关推荐

微信公众号，点击按钮打开pdf文件流，安卓跳转到浏览器里下载，ios可预览但默认不能下载
微信公众号,点击按钮打开pdf文件流,安卓跳转到浏览器里下载,ios可预览但默认不能下载注:在pc上开始时采用这两种方式是没有效果的,或者打开的是空页面,但上线到公众号是没有问题的!!!!!!!!! ...
word另存为html文件后，浏览器打开不显示图片
word另存为html文件后,浏览器打开不显示图片原因:word自动将图片在html文件中转为<v:imagedata src="路径名" o:title="&q ...
js判断是否是在微信浏览器打开
标题js判断是否是在微信浏览器打开一.直接判断是否是在微信浏览器打开的 (1)法1: function is_weixn(){ var ua = navigator.userAgent.toLowe ...
浏览器显示海康摄像头实时预览画面纯前端解决方案
浏览器显示海康摄像头实时预览画面纯前端解决方案将海康设备的 rtsp 协议视频流通过 ffmpeg 转码为 flv 实时视频流,并将实时视频流通过 express 服务生成 http 长链接或 ws ...
qq打开网页时提示用浏览器打开html,微信QQ打开网页时提示用浏览器打开
微信QQ打开网页时提示用浏览器打开一,需求分析 1.1,使用微信或QQ打开网址时,无法在微信或QQ内打开常用下载软件,手机APP等.故此需要在微信qq里提示二,功能实现 2.1 html实现请点 ...
微信小程序上传图片及文件（上传、下载、删除及预览）
微信小程序上传附件上传文件及图片下载,预览.删除自定义封装组件哪儿用哪儿调用即可 wxml代码 <!-- <view>上传文件(我是子组件)</view> --& ...
js直接显示html,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例.pdf...
JS实实现现可可直直接接显显示示网网页页代代码码运运行行效效果果的的HTML代代码码预预览览功功能能实实例例本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大供大参 ...
HTML完成如下网页效果代码,JS实现可直接显示网页代码运行效果的HTML代码预览功能实例...
本文实例讲述了JS实现可直接显示网页代码运行效果的HTML代码预览功能.分享给大家供大家参考.具体如下: JavaScript实现HTML代码预览功能,直接在网页上显示代码运行的效果,就例如点击&qu ...
Vue项目中使用基于pdf.js的vue-pdf插件在pc浏览器下阅览PDF文件
最近项目中需求为在浏览器上阅览PDF格式的文件,之前没有写过,随即上网查阅,发现大家常使用的为两个插件. 其一是火狐出品的pdf.js,github地址:https://github.com/mozi ...

前端js打开pdf文件--文件通过浏览器打开，以pdf形式进行预览

前端js打开pdf文件--文件通过浏览器打开，以pdf形式进行预览相关推荐

最新文章

热门文章