vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > JavaScript判断PDF与图片预览

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

作者:马优晨

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

您可能感兴趣的文章:
阅读全文