前端tif文件在线预览

layui框架，实现支持tif格式文件在线预览

首先要引用tif的js文件

js下载地址 tif在线预览文件-tiff.min.js-Javascript文档类资源-CSDN文库https://download.csdn.net/download/sinat_37774909/36996306

引用之后则可进行逻辑编写了，详情见代码

show.showTif = function(imageData){if (imageData == "") {common.fail("查看图片出错，请联系相关开发人员！");return ;}//后端返回base64格式的tif信息var data = imageData[0];//使用layui的open打开窗口layer.open({type: 1 //此处以iframe举例,title: "tif预览",area: ['80%', '90%'],shade: 0,maxmin: true,moveType: 0,zIndex: layer.zIndex,content:'<div id="tifcontainer"><div id="pop"></div></div>',success:function(){var buffer = fifth.decodeBase64(data);var tiff = new Tiff({buffer : buffer});//tiff文件中有多张图片$('#pop').empty();for (let i = 0, len = tiff.countDirectory(); i < len; ++i) {tiff.setDirectory(i);const canvas = tiff.toCanvas();if (canvas) {canvas.id = 'page-id' + i;$('#pop').append(canvas);}}}});
}fifth.decodeBase64 = function(base64Str) {var bString = atob(base64Str);var len = bString.length;var arr = new Uint8Array(len);while (len--) {arr[len] = bString.charCodeAt(len);}return arr;
}

前端tif文件在线预览相关推荐

前端实现文件在线预览
需求: 一个览pdf.word.xls.ppt等文件需要在线预览功能介绍使用 XDOC文档预览云服务文档地址基于HTTP的REST方式调用,只需要传入URL! 支持pdf.docx.xlsx.p ...
前端实现文件在线预览功能
1.依赖安装 npm install -save mammoth 2.引入使用 import mammoth from "mammoth"data:return({previewC ...
文件在线预览图片 PDF Excel Word
1.前端实现pdf文件在线预览功能方式一.pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面.在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <ah ...
word、excel、ppt 办公文件在线预览
如果想要免费的,可以用 openoffice,实现原理就是: 通过第三方工具openoffice,将word.excel.ppt.txt等文件转换为pdf文件流:当然如果装了Adobe Reader ...
doc文件在线预览 vue_跨平台（uniapp）文件在线预览解决方案
一.前言之前写过一篇文章关于上传目录文件:uni-app系统目录文件上传(非只图片和视频)解决方案,这次来解决文件预览问题. uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者 ...
php excel文件在线预览（走过的坑）
php excel文件在线预览(走过的坑) 1.已经布好的服务如微软的Office365等平台服务 2.通过phpExcel扩展进行excel文件解析直接输出html 3通过openoffice进行文 ...
pdfjs-dist 实现pdf文件在线预览
pdfjs-dist 实现pdf文件在线预览实现效果实现过程 (1)安装pdfjs-dist (2)代码部分 (3)原理项目要求实现pdf文件在线预览,并且pdf预览通过上下页滚动pdf,且兼容 ...
跨平台（uni-app）文件在线预览解决方案
1024刚过,也祝愿各位码友在今后生活中,身体健康,事事顺心,再无Bug. 一.前言之前写过一篇文章关于上传目录文件:uni-app系统目录文件上传(非只图片和视频)解决方案,这次来解决文件预览问题 ...
WEB端和微信小程序端的文档文件在线预览方法
文件的在线预览方式汇总文件在线预览功能可以提高用户体验,值得加入. 一般常见的文件有office套装.pdf.txt.md.和音视频. 音视频的预览是单独一块,今天主要说说文档文件的在线预览功能. ...
java flexpaper_java web word文件 pdf文件在线预览源码(flexpaper)
[实例简介]java web word文件 pdf文件在线预览源码经过测试 [实例截图] [核心代码] BrowsenOnline html, body{ height:100%; } body { ...

前端tif文件在线预览

前端tif文件在线预览相关推荐

最新文章

热门文章