预览_预览缩略图 - CSDN
精华内容
参与话题
  • 图片上传预览

    2020-07-28 23:32:22
    实现图片上传预览,可以增加新的空数组,并上传和替换。还有删除功能;提交的时候,还可以判断是否有空的img
  • 浏览器下载文件主要还是看文件保存的时候有没有设置正确的conten-type,有的话浏览器访问url时会自动打开该文件将内容显示在页面上,前提时浏览器本身能识别这个文件类型,比如图片/文档/文本等,否则浏览器则会默认...

    浏览器下载文件主要还是看文件保存的时候有没有设置正确的conten-type,有的话浏览器访问url时会自动打开该文件将内容显示在页面上,前提时浏览器本身能识别这个文件类型,比如图片/文档/文本等,否则浏览器则会默认直接下载该文件。。。当然如果后端能直接返回文件流(bolb类型)的话就好处理了)

    用js实现强制下载图片(经测试IE全版本不支持):

    downloadIamge(imgsrc, name) {//下载图片
       let image = new Image();
       image.src = imgsrc;
       // 解决跨域 Canvas 污染问题
       image.setAttribute("crossOrigin", "anonymous");
       image.onload = function() {
           let canvas = document.createElement("canvas");
           canvas.width = image.width;
           canvas.height = image.height;
           let context = canvas.getContext("2d");
           context.drawImage(image, 0, 0, image.width, image.height);
           let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
           let a = document.createElement("a"); // 生成一个a元素
           a.download = name; // 设置图片名称
           a.href = url; // 将生成的URL设置为a.href属性
           a.click()
       }
    }

    预览PDF(此链接也是pdf.js实现):

    let a = document.createElement('a')
    a.target = "_blank"
    a.href = 'http://mozilla.github.io/pdf.js/web/viewer.html?file='+fileUrl
    document.body.appendChild(a)
    a.click()

    预览文档(利用微软提供的方案):

    let a = document.createElement('a')
    a.target = "_blank"
    a.href = 'https://view.officeapps.live.com/op/view.aspx?src='+fileUrl
    document.body.appendChild(a)
    a.click()
    /*这个文件地址需满足以下几个条件:
    (1)在浏览器是可以访问的;
    (2)需域名访问,IP无效;
    (3)访问端口为80;*/

    html内容导出为PDF:

    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    import moment from 'moment'
    export default (title, id)=> {
        var element = document.getElementById(id)
        element.scrollIntoView(true)
        window.scrollTo(0, 0);
        setTimeout(() => {
          html2Canvas(element).then(function(canvas) {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
    
            //一页pdf显示html页面生成的canvas高度;
            var pageHeight = contentWidth / 592.28 * 841.89;
            //未生成pdf的html页面高度
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            var padding = 10
            //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = 592.28 / contentWidth * contentHeight;
    
            var pageData = canvas.toDataURL('image/jpeg', 1.0);
    
            var pdf = new JsPDF('', 'pt', 'a4');
    
            //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
            //当内容未超过pdf一页显示的范围,无需分页
            if (leftHeight < pageHeight) {
              pdf.addImage(pageData, 'JPEG', padding, padding, imgWidth-padding*2, imgHeight);
            } else {
              while (leftHeight > 0) {
                pdf.addImage(pageData, 'JPEG', padding, position, imgWidth-padding*2, imgHeight)
                leftHeight -= pageHeight;
                position -= 841.89;
                //避免添加空白页
                if (leftHeight > 0) {
                  pdf.addPage();
                }
              }
            }
            pdf.save(title + moment(Date.now()).format('YYYY-MM-DD') + '.pdf');
          });
        }, 0);
    }

    流预览、流转base64预览

    后端直接返回文件类型,前端请求加一个responseType: 'blob',得到blob对象:

    callback: (res)=>{
       if(res){
              let blob = new Blob([res], {type: "application/pdf"})
              //1.将blob转base64通过内嵌iframe预览
              var reader = new FileReader()
              reader.readAsDataURL(blob);
              reader.onload = function(){
                 console.log(reader.result); 
                 sessionStorage.PDF = reader.result
                 window.open('/PDFviewer')
              };
              //2.直接预览
              if (window.navigator && window.navigator.msSaveOrOpenBlob){
                  window.navigator.msSaveOrOpenBlob(blob,'');
              }else{
                  window.open(window.URL.createObjectURL(blob))
              }
        }else{
            message.warning(res.msg)
        }
    }

     

    展开全文
  • 前端---文件预览

    2020-08-22 23:36:04
    预览的文件是存在某个服务器中,不是返回流的形式,则可以通过下面的连接进行预览。 http://view.officeapps.live.com/op/view.aspx?src=文件源地址

    要预览的文件是存在某个服务器中,不是返回流的形式,则可以通过下面的连接进行预览。 

    http://view.officeapps.live.com/op/view.aspx?src=文件源地址

     

    展开全文
  • 文档在线预览实现方法

    千次阅读 2018-08-28 19:57:22
    介绍:文档预览一般实现步骤为: 1、将文档(word,excel,ppt等)转换为pdf文件格式 2、使用网页展示pdf文件 我使用的是aspose+pdf.js方法实现,使用前者将文档转换为pdf格式,在使用pdf.js插件显示。 将pdf.js...

    介绍:文档预览一般实现步骤为:

    1、将文档(word,excel,ppt等)转换为pdf文件格式

    2、使用网页展示pdf文件

    我使用的是aspose+pdf.js方法实现,使用前者将文档转换为pdf格式,在使用pdf.js插件显示。

    将pdf.js插件集成到项目后进行如下操作:

    1、aspose内置将(word,excel,ppt)转换为pdf的方法,调用即可。

    @RequestMapping("/path/{id}")
        public void getPath(@PathVariable Integer id, HttpServletResponse response) throws IOException {
            File file = service.getPDFById(id, getUploadPath());
            try (FileInputStream input = new FileInputStream(file)) {
                inToOut(input, response.getOutputStream());
            } catch (Exception e) {
                response.getOutputStream().write("预览失败,请重试".getBytes());
            }
        }

    2、其中file就是转换好的pdf文件,inToOut()的代码如下:

     protected void inToOut(InputStream in, OutputStream out) throws IOException {
            byte[] dataByte = new byte[1024];
            int l;
            while ((l = in.read(dataByte)) != -1)
                out.write(dataByte, 0, l);
        }

    作用是将文件输入流的内容写到response的输出流中,前端显示即可,代码如下:

     if(jQuery.inArray(format,noImg)!=-1){
                        	viewPath="${ctxPath}/plugin/onlineView/web/viewer.html?file=${ctxPath}/${code}/path/"+id;
                        }else{
                        	viewPath="${ctxPath}/plugin/onlineView/imgView.html?id="+id+"&url=${ctxPath}/${code}/getImgStream/";
                        }

    前者就是是显示我的pdf文件的路径,将其做为a标签的href属性值即可。

    附上一个额外知识点:

    @ResponseBody
        @RequestMapping("/getImgStream/{id}")
        public byte[] getImgStream(@PathVariable Integer id) {
            String fileName = service.findById(id).getUrl();
            String filePath = getUploadPath() + "document/" + fileName;
            File file = new File(filePath);
    
            byte[] buffer = null;
            try (FileInputStream inputFile = new FileInputStream(file)) {
                buffer = new byte[inputFile.available()];
                inputFile.read(buffer);
            } catch (IOException e) {
                e.printStackTrace();
            }
            return Base64.getEncoder().encode(buffer);
        }

    由于第二个路径是显示图片,所以先获取图片的二进制形式传到前端使用img标签显示即可

     $("#img").attr("src","data:image/*;base64,"+data);

    data就是我的图片二进制形式

    展开全文
  • github在线预览总结

    千次阅读 2020-07-23 17:06:48
    最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好。 这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目...

    最近在使用 vue-cli 脚手架工具构建自己的第一个 vue 项目,有点小激动,想把它上传到 github 并展示一下预览效果,结果踩了好多坑,折腾了大半天才弄好。

    这里假设你也是和我一样使用了 vue-cli 搭建了自己的项目,并且项目也已经上传到了 github

    问题1

    当我们在命令行执行 npm run build 后,项目的目录下会生成一个 dist 文件夹,它里面又包含一个 static 文件夹和一个 index.html 文件,这是 webpack 最终打包好的文件
    在这里插入图片描述

    我们先尝试在浏览器打开 index.html

    在这里插入图片描述

    咦,为什么页面显示是空白的?打开控制台,细心的朋友可能会发现, script 标签的引入路径好像不对啊,因为 static 文件夹和 index.html 是在同一个目录下的,这里却是从根目录引入 static 下的文件,正确的路径应该是 ./ 开头的相对路径: src=’./static/…’ 或者 src=‘static/…’

    是哪里出了问题?其实这跟配置资源的路径有关,打开项目根目录 config 文件夹下的 index.js ,定位到 build 下的 assetsPublicPath (dev下也有一个assetsPublicPath,别搞错了,我就是在这里踩了第一个坑),把

    assetsPublicPath: ‘/’ 修改为 assetsPublicPath: ‘./’
    在这里插入图片描述

    这下可找出原因,因为这里把静态资源路径设置为在根目录下,所以 script 标签的引入路径就找不到 static 文件夹下的文件了

    重新执行 npm run build ,再打开 index.html 文件

    在这里插入图片描述

    OK!在浏览器可以看到页面效果了!

    也行你会问,为什么 assetsPublicPath 的路径要设置为在根目录下,这不是在折腾我们吗?其实这是因为在真正的项目开发中, index.html 和 static 文件夹会被放到服务器的根目录下,然后进行线上发布。

    问题2

    本地预览问题解决了,接着我们把项目 push 到 github

    这里又出问题了! dist 文件没有被上传到 github ,怎么回事?找到项目根目录的 .gitignore 文件,这里设置一些文件名,对应的文件将不会被提交到 github 上面,而 dist 被设置在里面,所以就不能上传到 github 上了,我们可以把 dist 从文件里移除。 当然还有另一种办法,就是在操作 git 命令时,把 git add. 改为 git add -f

    dist 意思是强制把 dist 文件提交到 github 。
    在这里插入图片描述

    好了,现在我们已经可以在 github 仓库里看到 dist 文件夹。

    疑惑,为什么 dist 文件夹要设置不被提交? 试想一下,在真正项目开发中, dist 文件夹中的 static 和 index.html 最终是要被扔到服务器上的,而不是提交到 github 上。

    现在还是不能实现项目的线上预览效果,点击项目的 setting 项,然后找到 Github Pages

    在这里插入图片描述

    选择 master branch ,保存,接着你会看到项目在线预览链接,点击链接

    在这里插入图片描述

    此时,你会看到页面一片空白,别急,在地址栏后面添加 dist (因为 index.html 是在 dist目录 下),回车,好了,线上页面效果出来了

    在这里插入图片描述

    至此,项目的在线预览效果就实现了!!

    还没有结束!在项目的 master 分支上,混合了源代码和页面预览文件,能不能把两者分开?而且还有一个问题, index.html 总是在 dist 路径下的,能不能项目名称直接跟 index.html 。这里就引出另外一种办法了。

    另外一种办法

    采用 github 的 gh-pages 分支制作 GitHub Pages ,只把 dist 添加到 gh-pages 分支,这样就把源代码和页面预览文件分开了

    (先把本地的 dist 文件夹删除,再上传到 github ,更新 master 分支)

    git 命令操作

    git run build      
      git branch gh-pages   //创建gh-pages分支
      git checkout gh-pages  //切换到gh-pages分支
      git add -f dist     //强制把dist文件夹提交到github
      $ git subtree push --prefix dist origin gh-pages  //把dist文件夹单独部署到gh-pages分支
    

    git run build
    git branch gh-pages //创建gh-pages分支
    git checkout gh-pages //切换到gh-pages分支
    git add -f dist //强制把dist文件夹提交到github
    $ git subtree push --prefix dist origin gh-pages //把dist文件夹单独部署到gh-pages分支

    在这里插入图片描述

    这里要选择 gh-pages branch ,再点击连接,如果此时看到空白页面,别急,稍等一会(内容更新需要时间)

    好了,现在看仓库的 master 分支,不存在 dist 文件夹了,再看线上预览地址,也完美了

    在这里插入图片描述
    在这里插入图片描述

    总结

    以上所述是就是总结的vue项目实现github在线预览功能的方法。

    展开全文
  • android 在线预览pdf文件(目前最全)

    万次阅读 热门讨论 2019-11-25 17:28:05
    android原生webView不支持预览pdf文件,ios却可以,所以android想要实现在线预览webView要通过其他方法,有以下几种方法: 一.andorid原生自带的pdf管理库,主要提供两个类pdfRender和pdfDocument,有兴趣的可以...
  • Qt实现保存、浏览、预览、打印功能

    万次阅读 多人点赞 2018-09-26 22:39:51
    Qt提供了以文本、图片、HTML等方式来实现对文档的操作,主要用到了QPrinter类和QPainter类,用到了QFileDialog文件窗口、QPrintPreviewDialog预览窗口类和QPrintDialog打印窗口类,Qt5也提供了QPdfWriter类来实现对...
  • 前端实现在线预览pdf、word、xls、ppt等文件

    万次阅读 热门讨论 2018-09-06 17:55:11
    最近做了一个项目,需要实现各种文档的在线预览功能。记得以前只能在线预览PDF,然后上网查了一下,发现微软开发了一个在线预览的,可以实现在线预览word、xls、ppt。  通过:&lt;a target='_black' href='...
  • 在线预览cad图纸

    万次阅读 2018-01-18 10:29:14
    可以跨浏览器实现在线预览cad,不需要安装AutoCAD,支持谷歌火狐浏览器,cad格式支持dwg等等。cad格式图片的倍数是100000.其他图请更改相应的比例 在线预览cad图纸资源下载地址
  •  在"文件资源管理器"的菜单中选择"查看—预览窗格",或者使用快捷键Alt-P 2.无法预览图片的问题  1)在"文件资源管理器"中,右键点击"此电脑",选择"属性";或者在桌面中右键点击"此电脑",选择"属性"  2)选择
  • 昨天遇到一个需求,公司的视频项目都是视频类型,如果是文件类型就直接打开预览,或者下载查看 项目把请求的资源都作为视频资源处理,直接赋值给 video 标签解析。所以我新增了一个功能函数,方法很简单 文件预览...
  • 前端-在线预览pdf、word、xls、ppt等文件

    万次阅读 热门讨论 2020-07-01 16:37:45
    1、前端实现pdf文件在线预览功能 方式一: 通过a标签href属性实现 pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览 <...
  • Atom编辑器 中预览markdown

    万次阅读 2017-01-01 23:04:20
    Atom编辑器 中预览markdown使用快捷键:Shift + Ctrl + M菜单位置: Packages -> Markdown Preview -> Toggle Preview效果
  • 在线预览pdf文件(pdfJS)

    万次阅读 2020-05-10 23:09:22
    在线预览pdf文件(pdfJS) 刚进公司实习第一天,组长就让我自己去实现在线展示PDF文件,看了看网上贴子也比较了一下pdfObiect(感兴趣的可以看看),最终决定用pdf.js来实现预览功能。 使用pdfjs目的是为了打开pdf...
  • Outlook 如何打开或关闭邮件预览功能

    千次阅读 2012-11-07 10:30:57
    View -> Reading Pane -> Left/Righht/Off
  • 今天看MOOC视频的时候学到一招win10中快速预览word/pdf提高效率的方法:选中目标文件,查看,浏览窗格即可。简单高效,MARK!  
  • 为啥海康摄像头网页无法预览

    万次阅读 2019-07-06 04:33:34
    最近在做IPC相关的业务,用谷歌、火狐都无法预览摄像头画面,即使装了插件也不行,后面发现了,要用IE打开,才能预览。。。。。 转载于:https://www.cnblogs.com/132818Creator/p/10980880.html...
  • VSCode中预览markdown和修改预览样式

    万次阅读 2017-10-13 18:58:47
    一VSCode可以直接编辑markdown并且预览 二修改VSCode中markdown预览样式 三我不管我直接下载插件 四结束一、VSCode可以直接编辑markdown并且预览使用快捷键Ctrl+k然后按V健,或者点击右上角的打开侧边栏预览(在预览...
  • 上一篇博客翻译了Outlook 2016: 不能预览Excel文件的解决办法,但是和我遇到的实际情况不完全一样。 我安装的是64位的Windows 10和VL批量许可的64位的Office 2016,不能在Outlook中阅览Excel文件了,通过修改注册表...
  • JS 在线预览Word,Excel

    万次阅读 2019-11-07 11:31:58
    word文件 XDOC可以实现预览以DataURI表示的DOC文档,此外XDOC还可以实现文本、...下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制 <a href="http://www.xdocin.com/xdoc?_func=to&am...
1 2 3 4 5 ... 20
收藏数 310,294
精华内容 124,117
关键字:

预览