使用前端JS代码 预览txt 图片 pdf

最新推荐文章于 2024-07-01 02:17:25 发布
最新推荐文章于 2024-07-01 02:17:25 发布
阅读量1.2k 收藏
点赞数
分类专栏： Js前端 文章标签： JS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="Scripts/js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <title>在线预览图片、TXT文档以及PDF文件</title>
</head>
<body>
    jsReadFile:<input type="file" οnchange="jsReadFiles(this.files)" />
    <script type="text/javascript">
        debugger;
        function jsReadFiles(files) {
            if (files.length) {
                var file = files[0];
                var reader = new FileReader(); //new一个FileReader实例

                if (/text+/.test(file.type)) {//判断文件类型，是不是text类型
                    reader.onload = function () {
                        $('body').append('<pre>' + this.result + '</pre>');
                    }
                    reader.readAsText(file, "gb2312");
                }
                else if (/image+/.test(file.type)) {//判断文件是不是imgage类型
                    reader.onload = function () {
                        $('body').append('<img src="' + this.result + '"/>');
                    }
                    reader.readAsDataURL(file);
                }
                else if (/pdf+/.test(file.type)) {//判断文件是不是pdf类型
                    reader.onload = function () {
                        $('body').append('<iframe src="' + this.result + '" style="width:100%;height:550px;" />');
                    }
                    reader.readAsDataURL(file);
                }

            }
        }
    </script>
</body>
</html>

tone1128
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端实现文件在线预览txt，pdf，doc，xls，ppt几种格式
weixin_30448685的博客
04-23 1万+
做法就是使用iframe标签 1.text，pdf的文件预览 <iframe class="filename" :src="文件的地址" width='100%' height='600' frameborder='1' ></iframe> 2.doc,xls,ppt等office的预览 <iframe class="filename" :...
JavaScript代码实现txt文件的上传预览功能
11-30
今天做项目刚好碰到这个记录一下。因为是简单的txt文件，只涉及文本，如果需要涉及图片预览就需要使用papaparse和jschardet，此处不多叙述。  表单按钮使用js的onchange=”uploadfile()” 事件，function函数代码如下所示： //此处为txt文件上传预览的js代码 function uploadfile(){ var file=$("#txt")[0].files[0]; //判断上传文件是不是txt格式,判断后缀是不是.txt if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){ al
JS之文件预览功能的实现
最新发布
weixin_36491976的博客
07-01 91
需求：JS实现文件预览功能，可预览图片、Word文档、Excel表格、PDF文件、TXT文件。Word预览：需要安装docx-previewExcel预览：需要安装xlsxPDF预览：需要安装pdfh5登录后复制 npm i pdfh5 -D1.如果报错登录后复制 [vite] error while updat...
js预览上传的文本文件
学习使我快乐_玉祥
12-03 537
留笔记，省的再找
前端Ａjax实现预览TXT文档（兼容UTF-8，ANCII,Unicode）
weiyuqingxin的博客
07-24 3486
最近在做文档的预览问题，在做txt的时候,原本是用HTML &lt;object&gt; 标签,但是读取的时候乱码，经查找资料，知道了原来txt文档默认的是ANCII编码，解决办法如下; 一、将ANCII转Unicode，但是没有成功， //ASCII 转换 Unicode function AsciiToUnicode(content) { result = ''; for...
前端用vue写文件预览txt,pdf,doc|| docx,xls || xlsx 等格式文件
weixin_44690999的博客
11-29 3429
这里写自定义目录标题引入htmljs 引入 import mammoth from 'mammoth' import XLSX from 'xlsx' html <el-dialog fullscreen :visible.sync="previewDialogVisible"> <iframe v-if="pdfContent.length > 0" :src="pdfContent" width="100%" :height="HIfram" framebo
js读取本地txt文件，实现表格预览
weixin_42565137的博客
05-23 8609
aaa
全端兼容的前端h5预览pdf插件
03-22
总的来说，"全端兼容的前端H5预览PDF插件"利用pdf.js库提供了跨平台、安全且高效的PDF预览功能。其易用性和广泛的兼容性使得它成为开发者在构建Web应用时预览PDF的理想选择。无论是企业级项目还是个人作品，都可以...
pdf.js前端插件，用于在线预览pdf文件
06-16
总结，PDF.js是前端开发者处理PDF预览的强大工具，它提供了丰富的API和高度可定制性，让在线预览PDF变得简单易行。通过理解和运用这些知识点，你可以构建出高效、安全且用户体验良好的PDF预览功能。
pdf.JS-前端无需跳转在线预览pdf功能
02-03
这个功能对于提升用户体验非常有用，因为用户可以在前端直接预览PDF文件，无需跳转到其他页面或下载文件。在移动设备和Web端都适用，特别适合在uni-app框架下开发应用。 uni-app是一个多端开发框架，它允许开发者...
pdfjs解决前端需要预览打印下载pdf的一款插件
01-09
6. **Vue.js集成**：对于使用Vue.js框架的项目，可以将PDF.js封装为Vue组件，通过组件化的方式调用和管理PDF预览功能。 7. **自定义样式**：允许开发者根据项目需求定制PDF预览界面的样式，如字体、颜色、背景等。 ...
在线预览需要的前端JS
04-17
在线预览需要的前端JS，配合后台代码使用，详细使用都在我的博客里了
HTML+JS实现浏览器在线预览文件（支持pdf、excel、ppt、doc、jpg、png格式）
04-19
浏览器在线预览文件（支持pdf、excel、ppt、doc、jpg、png格式） PS：excel、ppt、doc格式只支持公网地址，如：http://xxx/x.odc
js实现pdf在线预览
07-06
js实现pdf格式在线预览 自己测试通过，不错的工具类，希望能帮助到需要的人 以下是书的内容 给编辑的话： 1、封面建议做得活跃点，比如放授课的场景，放作者的大幅肖像。请考虑是否制作勒口与腰线。 2、内容排版请排得松一些，以便阅读起来轻松一点。 3、文中有许多标粗或放大的字，是关键词语，请想办法突出处理。 4
以html形式显示或预览word，excel，pdf，txt
10-08
本源码主要是ASP.net后台通过相应的类把word\excel\pdf\txt文件转化为html,将地址传回前端,前端获取地址，用iframe进行展现预览。
html前端js代码pdfjs在线预览pdf兼容ie\chrome
08-01
PDF.js是Mozilla开发的一个开源项目，它允许在Web浏览器中以纯JavaScript实现PDF文档的解析和渲染，从而实现在线预览PDF文件的功能。这个项目的主要目标是提供一个跨平台、跨浏览器的解决方案，使得PDF文件的在线...
使用JS快速读取TXT文件
热门推荐
little_fat_sheep
06-20 2万+
1 前言 最近有个需求，需要使用JS快速读取外部大数据文件（60w条记录的表）。笔者尝试过使用JS读取Excel文件，但是跑了十几分钟仍未出结果，后来笔者尝试将原数据保存为TXT文件，再从TXT文件中读取数据，只需几秒钟即可读取完毕。在此分享一下，也留着以后备用。 2 案例 为方便快速理解，笔者挑选了一个数据量小、业务逻辑简单的案例：从TXT文件中读取数据，并按照原列表格式显示。 工作空...
JS代码之《在线预览图片与TXT文档》
weixin_30265103的博客
11-20 295
代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &l...
前端word和pdf预览代码
05-23
你可以使用第三方库来实现 Word 和 PDF 文件的预览，比如： 1. Google Docs Viewer Google Docs Viewer 可以预览 Word、PDF、PPT、TXT 等多种文档格式，你可以将文档的 URL 传递给 Google Docs Viewer，然后显示在一个 iframe 中。 ``` <iframe src="https://docs.google.com/gview?url=http://example.com/document.doc&embedded=true"></iframe> ``` 2. PDF.js PDF.js 是一个由 Mozilla 开发的开源 JavaScript 库，用于在浏览器中渲染 PDF 文件。你可以使用下面的代码来预览 PDF 文件。 ``` <!DOCTYPE html> <html> <head> <title>PDF.js Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script> </head> <body> <canvas id="pdfCanvas"></canvas> <script> var pdfCanvas = document.getElementById("pdfCanvas"); var pdfURL = "http://example.com/document.pdf"; pdfjsLib.getDocument(pdfURL).promise.then(function(pdf) { return pdf.getPage(1); }).then(function(page) { var viewport = page.getViewport({scale: 1}); pdfCanvas.width = viewport.width; pdfCanvas.height = viewport.height; page.render({ canvasContext: pdfCanvas.getContext("2d"), viewport: viewport }); }); </script> </body> </html> ``` 3. Office Online 如果你有 Microsoft Office 365 订阅，你可以使用 Office Online 来预览 Word 和 Excel 文件。你需要将文档的 URL 传递给 Office Online，然后显示在一个 iframe 中。 ``` <iframe src="https://view.officeapps.live.com/op/embed.aspx?src=http://example.com/document.docx"></iframe> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值