精华内容
下载资源
问答
  • 针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install –save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入pdf....
  • 使用OpenOffice + jodconverter 将文档转成pdf,通过pdf.js在页面展示 写的是Stringboot 版的demo,核心代码很少,很容易懂
  • vue文件预览word

    千次阅读 2021-05-11 10:43:03
    第一种: <a :href ="'...amp;...amp;_cache=1&amp;_xdoc='+scope.row.FileUrl+''" target="_blank" rel="nofollow">...//文件预览点击的时候传url(文件路径) wordDetail(url) { // 微软提供的...

    第一种:

    <a  :href ="'http://www.xdocin.com/xdoc?_func=to&amp;_format=html&amp;_cache=1&amp;_xdoc='+scope.row.FileUrl+''" target="_blank" rel="nofollow">

    第二种:    

    //文件预览点击的时候传url(文件路径)
                wordDetail(url) {
                    // 微软提供的方法
                    // window.open(url);
                    var fileExtension = url.substring(url.lastIndexOf(".") + 1);
                    if (url) {
                        if (//如果是以下格式就可以本地打开
                            fileExtension == "jpg" ||
                            fileExtension == "png" ||
                            fileExtension == "txt" ||
                            fileExtension == "pdf" ||
                            fileExtension == "PDF" ||
                            fileExtension == "mp4"
                        ) {
                            window.open(url);
                            // window.location.assign(url);
                        } else {

    //否则利用第三方打开
                            window.open(
                                `https://view.officeapps.live.com/op/view.aspx?src=${url}`
                            );
                        }
                    } else {
                        this.$message({
                            message: "暂无可下载文件",
                            type: "warning"
                        });
                    }
                }

    展开全文
  • vue 在线预览、下载word、pdf文件

    万次阅读 2019-07-31 18:04:46
    最近项目用vue-cli3要实现word和pdf文档在线预览和下载,在网上看到各位大佬们各种办法,发现踩坑无数,还是没弄出来,最后发现还是是自己想复杂了 PDF预览下载 在网上看到有大多数人都在用vue-pdf实现预览,我也...

    vue 在线预览、下载word、pdf文件

    最近项目用vue-cli3要实现word和pdf文档的在线预览和下载,在网上看到各位大佬们各种办法,发现踩坑无数,还是没弄出来,最后发现还是是自己想复杂了

    PDF预览下载

    在网上看到有大多数人都在用vue-pdf实现预览,我也试用了一下,发现官方例子点简单,网上各种大佬的帖子也很多了,所以就不重复了。
    这个还是用最原始的才是最简单的,A标签直接下载预览,但是需要注意的就是,pdf的文件放在了public目录下,在写的时候指向文件
    在这里插入图片描述

    word预览下载

    word的下载依然使用了A标签直接下载
    预览的话,A标签是不支持的,所以找了一个插件kkFileView,简直好用!!!
    提供一下他们家的地址~~
    官网:https://kkfileview.keking.cn/zh-cn/index.html
    码云:https://gitee.com/kekingcn/file-online-preview
    github:https://github.com/kekingcn/kkFileView
    dockerhub:https://hub.docker.com/r/keking/kkfileview

    这个是需要运维童鞋帮忙配置部署环境的

    官网上的例子是
    在这里插入图片描述
    配置好之后会发给你一个链接,然后我们接入就可以了
    替换例子中的http://127.0.0.1:8012就可以了!

    纯属记录一下,如有错误,请指正~

    展开全文
  • 1、npm安装插件 npm i docx-preview 2、index.html文件引入 <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script> 3、应用实例 <template>.../template>.

    1、npm安装插件

    npm i docx-preview


    2、index.html文件引入 

    <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>

    3、应用实例

    <template>
      <div class="content">
        <div ref="file"></div>
      </div>
    </template>
    
    <script>
    import axios from 'axios'
    let docx = require('docx-preview');
    export default {
      mounted(){
        axios({
          method: 'get',
          responseType: 'blob', // 设置响应文件格式
          url: '',// 接口地址
        }).then(({data}) => {
          docx.renderAsync(data,this.$refs.file) // 获取到biob文件流,进行渲染到页面预览
        })
      }
    }
    </script>
    展开全文
  • vue预览word,excel,pptx,pdf文件

    千次阅读 2021-01-26 14:58:29
    vue预览word,excel,pptx,pdf文件 1、做word,excel,pptx的预览,要先确定文件路径访问是通过域名的url来预览,不可以通过IP的url来访问 先把文件路径的url进行url编码(encodeURIComponent) let router = '...

    vue预览word,excel,pptx,pdf文件

    1、做word,excel,pptx的预览,要先确定文件路径访问是通过域名的url来预览,不可以通过IP的url来访问

    先把文件路径的url进行url编码(encodeURIComponent

    let router = 'https://aaaaaa.com/file/download?filename=file.obj_id'  //文件路径
    let url = encodeURIComponent(routeUrl)
    

    然后用Office Web Viewer的路径接口

    http://view.officeapps.live.com/op/view.aspx?src=
    

    把两个拼接在一起

    let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
    window.open(officeUrl,'_target')
    

    这样就可以预览word,excel,pptx文件了

    完整的代码

    let routeUrl = 'https://aaaaaa.com/file/download?filename=file.obj_id'
    let url = encodeURIComponent(routeUrl)
    let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url
    window.open(officeUrl,'_target')
    

    2、pdf文件预览

    下载好pdf.js(下载地址在下面),放到static的目录下面

    网站链接:http://mozilla.github.io/pdf.js/getting_started/#download

    百度网盘:链接: https://pan.baidu.com/s/1tdGrN3L-A9wkOIBzXjUWYw 提取码: pucv

    在这里插入图片描述

    然后

    <div style="height:800px;">
      <iframe :src="pdfSrc" width="100%" height="100%"></iframe>
    </div>
    
    getSeePdf(file){
          this.pdffile=file
          let routeUrl = '文件地址url';
          let pSrc = routeUrl + '?r=' + new Date();
          this.pdfSrc = 'static/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
        },
    
    展开全文
  • Vue - element-ui 中预览 word 、exce、ppt以及pdf文件

    万次阅读 多人点赞 2019-08-17 16:21:01
    最近写了个有 预览word 、Exce、ppt以及pdf文件 的后台 管理 在网上也找了 很多 就感觉很复杂 ,当然最后还是实现了 , 本博主一项喜欢简单 越简单越好 越好理解 废话不多说 先上效果图 (我就喜欢那种有图的代码 能...
  • vue文档预览组件,此组件将在页面上显示文档的内容。 英文自述文件| 用 进口 首先,从yarn或npm添加此程序包。 yarn add vue-doc-preview or npm i vue-doc-preview --save 然后,将此组件导入.vue文件。 <...
  • <iframe src="" width="900px" height="610px" name="listReload" style="border: 0px;"></iframe> created() { this.getparams(); ... var url=this.$store.state.orignsystemditrow.content;...
  • vue移动端实现word在线预览

    千次阅读 2020-12-28 16:17:29
    word预览同样要使用插件,这里使用的是mammoth插件,首先vue项目引入: npm install mammoth 在预览的页面导入 import mammoth from ‘mammoth’ 同样的也引用了手势缩放和移动,在我pdf预览那篇文章有说明...
  • word简历在线编辑-vue

    2019-01-17 11:55:14
    vue-cli ----快速构建项目 scss ----便利的css大法 element-ui ---- UI组件库 normalize.css ---- 重置掉该重置的样式 LeanCloud ---- 存储数据 html2canvas ---- HTML转成canvas jsPDF ---- 转成PDF
  • vue 预览word文件docx

    千次阅读 2021-07-23 14:44:33
    链接地址 https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/%E5%89%8D%E7%AB%AF/vue%E9%A2%84%E8%A7%88word%E6%96%87%E4%BB%B6docx.html
  • 在详情页中有个下载按钮,可以下载word、excle文档类的东西,谷歌浏览器下载都没问题,但是IE浏览器下载不下来,都是破损文件。 原因分析: 因为IE浏览器兼容问题不是很友好,版本也比较老。 解决方案: 思路: ...
  • vue 预览 word

    2021-06-21 15:33:14
    vue 预览 word 注意:vue-cli3+ 在项目本地预览时,在public 文件夹下放文件。 vue-cli2 在新建static文件夹 1.引入插件 npm install mammoth 2.导入插件 import mammoth from 'mammoth' 3.核心代码 <!-- -->...
  • Asp.net MVC 利用(aspose+pdfobject.js) 实现在线预览word、excel、ppt、pdf文件,支持在线预览常用办公文档(word、excel、ppt、pdf)
  • 前端实现在线预览pdf、word、xls、ppt等文件

    万次阅读 热门讨论 2018-09-05 09:54:01
    记得以前只能在线预览PDF,然后上网查了一下,发现微软开发了一个在线预览的,可以实现在线预览word、xls、ppt。  通过:&lt;a target='_black' href='http://view.officeapps.live.com/op/view.aspx?src=$url...
  • vue实现预览word,excel,ppt,pdf、图片、视频解决方案 第一种简单方法: <el-tooltip content="预览" placement="top"> <el-button type="warning" @click="coverUrl(scope.row)" icon="el-icon-...
  • 主要介绍了vue导出html、word和pdf的实现方法,文中完成了三种文件的导出但是还有很多种方法,小编就不给大家一一列举了,需要的朋友可以参考下
  • java结合OpenOffice和pdf2htmlEX实现word、excel、ppt、pdf转为html
  • 背景 思考过程 word转markdown 用node的express框架搭建服务器 展示md文件到页面上 提取目录 引入element树 纯前端展示 完整目录结构 背景 当前所做项目(vue-cli+element)有一个需求,做一个帮助文档,把word文档在...
  • vue实现word或pdf文档导出的功能,我的项目是:后端返回一个文档流(下图),然后前端对文档流做处理进行下载,代码如下: ...type: `application/msword` //word文档为msword,pdf文档为pdf }); let obj
  • 也是因为这个PDF可以直接查看(现在浏览器基本支持了),那么我们实现Word文档在线预览,其实也是 把WORD文档 复制一份生成一份供预览的 PDF文件而已。 先看看效果: 正文 这篇实例,实现在线预览WORD...
  • importpdffrom'vue-pdf' pdf.createLoadingTask(url,httpHeaders); 参数:url(所请求的接口),headers(请求头信息) 或者url是pdf的链接地址 案例 (1)简单使用 <template> <div> <pdf ref=...
  • 自己项目中用到的技术,word转PDF然后实现在线预览的功能,代码可以运行 .
  • word、xls、ppt这些文件要用 微软官方的预览地址 注意:1. 文件地址必须公网;2. 静态资源不要有访问权限 最后,你控制的只是src地址 微软解析地址:https://view.officeapps.live.com/op/view.aspx?src=你的文件...
  • vueword本地上传预览

    千次阅读 2019-11-14 13:31:27
    1、word本地上传预览demo <html lang="en"> <head> <meta charset="UTF-8"> , initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>test-word本地上传预览title> head> <body> ...
  • 1.后端将文件转为二进制文件流 word+excel将其转为html 从而实现文件预览 2.pdf没这么复杂具体可看下文 3.ppt的实现方式是后端将ppt转为pdf 然后调用pdf接口 上众所期待的效果图: word excel pdf 一、预览公网上...
  • 针对android系统不支持pdf文档在线预览,可通过引入pdf.js插件实现,其具体实现步骤如下 一、引入插件 方式一:npm install --save pdfjs-dist,安装完成后在vue项目的node_modules出现如下依赖 方式二:只引入...
  • vue实现在线预览office文件

    千次阅读 2021-10-20 16:53:39
    按道理说,做文件的在线预览,买个第三方服务什么的,后端部署一下服务,前端对接一下,就通通搞定。 顶不住第三方基本上是要money的。那不想掏money,还有什么解决方法呢。 方法一 用微软的office online进行在线...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 820
精华内容 328
关键字:

vue在线预览word文档

vue 订阅