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与图片预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • element UI中el-dialog实现拖拽功能示例代码

    element UI中el-dialog实现拖拽功能示例代码

    我们在开发中常会遇见拖拽的功能,下面这篇文章主要给大家介绍了关于element UI中el-dialog实现拖拽功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • vue3.0中使用postcss-pxtorem的具体方法

    vue3.0中使用postcss-pxtorem的具体方法

    这篇文章主要介绍了vue3.0中使用postcss-pxtorem的具体方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue+echarts实现进度条式柱状图

    vue+echarts实现进度条式柱状图

    这篇文章主要为大家详细介绍了vue+echarts实现进度条式柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Element中table组件(el-table)右侧滚动条空白占位处理

    Element中table组件(el-table)右侧滚动条空白占位处理

    当我设置了max-height,就会在表格右侧出现一列空白的占位,本文主要介绍了Element中table组件(el-table)右侧滚动条空白占位处理,感兴趣的可以了解一下
    2023-09-09
  • antd Form组件方法getFieldsValue获取自定义组件的值操作

    antd Form组件方法getFieldsValue获取自定义组件的值操作

    这篇文章主要介绍了antd Form组件方法getFieldsValue获取自定义组件的值操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue环境下数据导出为PDF的最全指南

    Vue环境下数据导出为PDF的最全指南

    在现代Web应用开发中,将数据导出为PDF是一项常见且重要的功能需求,本文将全面探讨Vue环境下实现PDF导出的7种主要方法,大家可以根据自己的需求进行选择
    2025-05-05
  • VUE3中的函数的声明和使用

    VUE3中的函数的声明和使用

    这篇文章主要介绍了VUE3中的函数的声明和使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue+tp5实现简单登录功能

    vue+tp5实现简单登录功能

    这篇文章主要为大家详细介绍了vue+tp5实现简单登录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • Vue二级弹窗关闭错误的解决指南

    Vue二级弹窗关闭错误的解决指南

    本文详细分析了Vue.js项目中二级弹窗关闭时出现的DOM操作错误原因,并提供了多种解决方案,包括确保正确的DOM操作时机、处理过渡动画、管理动态组件和清理异步操作等,通过这些方法,可以有效预防和解决此类问题,提升应用的稳定性和性能,需要的朋友可以参考下
    2026-01-01
  • 详解10分钟学会vue滚动行为

    详解10分钟学会vue滚动行为

    本篇文章主要介绍了vue滚动行为,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论