JavaScript判断PDF与图片是否可以预览

 更新时间:2026年04月03日 09:03:30   作者:马优晨  
文章介绍了使用JavaScript判断图片和PDF是否可以预览的方法,对于图片,通过创建Image对象并监听其load和error事件来判断;对于PDF,则通过发送HTTP请求并检查响应类型为blob来判断,需要的朋友可以参考下

一、判断图片是否可以预览

在JavaScript中,可以使用Image对象来判断一个图片URL是否可以访问。如果图片可以被加载,那么load事件会被触发;如果图片无法访问,error事件会被触发。

function checkImageAccessibility(url, callback) {
  var img = new Image();
 
  img.onload = function() {
    callback(true); // 图片可以访问
  };
 
  img.onerror = function() {
    callback(false); // 图片无法访问
  };
 
  img.src = url;
}
 
// 使用示例
checkImageAccessibility('https://example.com/image.jpg', function(accessible) {
  console.log('图片可访问性:', accessible ? '是' : '否');
});

在这个例子中,checkImageAccessibility函数接收一个图片URL和一个回调函数。Image对象的src属性被设置为这个URL,然后监听load和error事件。当图片加载成功或失败时,相应的处理函数会被调用,并且回调函数会被执行,传递一个布尔值表示图片是否可以访问。

二、判断PDF是否可以预览

访问PDF的地址,判断地址是否可以访问到,这里的请求响应使用blob

    pdfPreview(fileUrl) {
      this.loading = true;
      axios({
        url: fileUrl,
        method: 'GET',
        responseType: 'blob',
      }).then((res) => {
        if (res.status !== 200) return;
        setTimeout(() => {
          this.loading = false;
        }, 300);
        this.pdfContainerVisible = true;
        this.$nextTick(() => {
          let url = '';
          if (fileUrl.startsWith('http://')) {
            url = fileUrl.substring(5);
          } else if (fileUrl.startsWith('https://')) {
            url = fileUrl.substring(6);
          } else {
            url = fileUrl;
          }
          PDFObject.embed(url, '#pdf-container', {
            width: '100%'
          });
        });
      }).catch(() => {
        this.loading = false;
        this.otherVisible = true;
      });
    },

到此这篇关于JavaScript判断PDF与图片是否可以预览的文章就介绍到这了,更多相关JavaScript判断PDF与图片预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue2.0 事件的广播与接收(观察者模式)

    Vue2.0 事件的广播与接收(观察者模式)

    这篇文章主要介绍了Vue2.0 事件的广播与接收(观察者模式),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 详解vue-router2.0动态路由获取参数

    详解vue-router2.0动态路由获取参数

    本篇文章主要介绍了详解vue-router2.0动态路由获取参数,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue.js实现日历插件使用方法详解

    vue.js实现日历插件使用方法详解

    这篇文章主要为大家详细介绍了vue.js模拟日历插件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue下滚动到页面底部无限加载数据的示例代码

    Vue下滚动到页面底部无限加载数据的示例代码

    本篇文章主要介绍了Vue下滚动到页面底部无限加载数据的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 使用Vue.js 和Chart.js制作绚丽多彩的图表

    使用Vue.js 和Chart.js制作绚丽多彩的图表

    这篇文章主要介绍了使用Vue.js 和Chart.js制作绚丽多彩的图表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,,需要的朋友可以参考下
    2019-06-06
  • 一文带你了解threejs在vue项目中的基本使用

    一文带你了解threejs在vue项目中的基本使用

    three.js是一个用于在Web上创建三维图形的JavaScript库,它可以用于创建各种类型的三维场景,包括游戏、虚拟现实、建筑和产品可视化等,下面这篇文章主要给大家介绍了关于如何通过一文带你了解threejs在vue项目中的基本使用,需要的朋友可以参考下
    2023-04-04
  • Vue通过路由实现页面间参数的传递

    Vue通过路由实现页面间参数的传递

    这篇文章主要介绍了Vue通过路由实现页面间参数的传递,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • 在vue里面设置全局变量或数据的方法

    在vue里面设置全局变量或数据的方法

    下面小编就为大家分享一篇在vue里面设置全局变量或数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法

    这篇文章主要介绍了超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue父组件触发子组件中的实现方法

    Vue父组件触发子组件中的实现方法

    文章总结:介绍了两种实现父组件触发子组件方法的常用方法:通过ref访问子组件实例并调用方法,以及使用自定义事件触发子组件方法
    2025-01-01

最新评论