1.像以前的百度文库那样，先转换成flash，然后放在网页上。
说明：使用软件OpenOffice/LibreOffice，swftools。
优点：在国内，由于Flash安装量很大，而且很多人用IE和Chrome内核的浏览器，所以是可以查看的。
缺点：OpenOffice/LibreOffice转换的结果可能会丢失格式/排版（我没试过所以不知道会不会），而且比较耗服务器资源，如果浏览器没装Flash就没法查看文档了，尤其是移动端。
2.转换成PDF，然后用Mozilla的pdf.js查看。
说明：转换成PDF的方法可以用OpenOffice/LibreOffice，也可以用七牛的第三方服务“文档转换”（由亿方云提供）。
优点：如果是把文件存放在七牛云，用在线的服务会比较有保障，加载速度也快。
缺点：收费，不过费用很低廉，pdf.js可能比较大，加载相对慢点，放到七牛上面会好些，对移动端支持不好。
3.转换成HTML，像现在的百度文库那样。
说明：使用PHPOffice和PDFtoHTML将文档转换成HTML直接在浏览器输出，类似现在的百度文库。
优点：浏览器无需安装任何插件，也不用担心兼容性问题，还支持移动端。
缺点：可能会丢失格式，而且用户可以直接拷贝文档内容，如果是扣积分下载的话，可能达不到目的。
方法/步骤准备工作：找到工具网站
使用搜索引擎，如百度搜索关键字“文档转换”、“文档预览”，或者直接搜索“永中DCS”，进入域名为yozodcs的网站。
通过顶部导航栏进入示例页面。默认的就是“文档预览”的页面，
我们就可以使用永中DCS文档转换小工具，简单3步在线预览常见的Office文档、PDF版式文档、Zip压缩文件。当然，也支持.doc/.docx格式的Word文件。
第一步（Step 1）：添加文件（上传需要预览的Word文件）
上传有两种模式，一是本地上传需要转换的Word文档（选择待转换的Word文档），二是转换在线文档。
两种上传模式都比较简单，在线文档需要使用在线文档的直接URL链接。
【下面以本地文件为例】
第二步（Step 2）：选择预览方式和查看预览结果
永中DCS文档在线预览官网示例工具支持两种预览模式——标准预览和高清预览
在下方输出文件中选择预览模式：标准预览和高清预览
等待转换结果。
转换后会生成预览链接和二维码(我们可以保存链接或者二维码，方便跨端访问，用于收藏与分享)。
点击链接，可以直接查看加密文档预览结果。
预览结果：
预览模式不同，预览结果也或有差异。高清版比标准版效果更新清晰。高清版还可以做到无极缩放原样展示的分页效果。并且支持移动自适应，支持HTML5。（第一张是标准预览、第二张为高清预览）
备注：
类似地，在线文档转换与本地文档转换差不多，按页面流程进行 *** 作即可。
效果对比一下，转换效果很不错。通过转换预览，我们可以在线阅读常见的一些Office文档。
在线预览、文档转换工具页面支持转换的格式多样，如PDF转换等，有兴趣的朋友可以体验一下。
预览页面还提供样例文件预览，不需要上传文件就可以体验在线预览的效果。
一、使用的插件html-docx-js
二、整体思路
因为canvas是运行在内存中的，所以不能简单的通过dom获取canvas图片，需要手动的先将canvas转为image。
三、实现
先克隆要下载的DOM的副本。
因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的）。我们这里将原DOM中的canvas转成图片，然后插入到副本的对应位置，这样 *** 作不会影响原DOM。
将DOM副本传入插件，生成文件对象，并下载下来。
import htmlDocx from 'html-docx-js/dist/html-docx'
/*
步骤1 ：因为canvas是运行在内存中的，所以也不能通过cloneNode方法克隆下来（克隆下来是空的），
所以先克隆再在克隆的dom上进行 *** 作是不可取的。所以需要在原DOM上生成img，
设置display: none从而使图片不影响页面展示，并插入到对应canvas元素之前（为了保证顺序不变）。
*/
const app = document.getElementById('app')
const cloneApp = app.cloneNode(true)
const canvases = app.getElementsByTagName('canvas')
const cloneCanvases = cloneApp.getElementsByTagName('canvas')
const promises = Array.from(canvases).map((ca, index) =>{
return new Promise((res) =>{
const url = ca.toDataURL('image/png', 1)
const img = new Image()
img.onload = () =>{
URL.revokeObjectURL(url)
res()
}
img.src = url
// 插入clone的dom的canvas之前
cloneCanvases[index].parentNode.insertBefore(img, cloneCanvases[index])
})
})
/*
步骤2 ：删除掉canvas元素
*/
// 删除clone的dom中的所有的canvas
const cloneCanvas = cloneApp.getElementsByTagName('canvas')
Array.from(cloneCanvas).forEach((ca) =>ca.parentNode.removeChild(ca))
/* 步骤3 ：将dom副本传入插件，生成文件对象，并下载下来 */
Promise.all(promises).then(() =>{
const converted = htmlDocx.asBlob(`
<!DOCTYPE html>
<html lang="en">
${document.head.outerHTML}
<body>
${cloneApp.outerHTML}
</body>
</html>`)
saveAs(converted, 'test.docx')
})
// 下载文件
function saveAs (blob, fileName) {
const a = document.createElement('a')
const url = URL.createObjectURL(blob)
a.href = url
a.download = fileName
a.display = 'none'
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
打开CSDN，阅读体验更佳
Canvas转化为图片下载,导出Word_canvas转word-Javascript文档类...
1.通用的canvas转化图片下载是没有后缀名的,这个可以有2.因为canvas是页面加载之后才canvas转word更多下载资源、学习资料请访问CSDN文库频道.
继续访问
html5中word文件阅读,使用 HTML5 Canvas 进行数据可视化_汽车之家...
根据W3C HTML5 规范 (http://www.wendangwang.com/TR/html5/the-canvas-element.html),canvas 元素“为脚本提供取决于分辨率的位图画布,该画布可用于动态呈现图形、游戏图形或其他可视图像。”Canvas 实际是在两个 W3C 规范中定义的...
继续访问
Canvas转化为图片下载，导出Word
1.通用的canvas转化图片下载是没有后缀名的，这个可以有； 2.因为canvas是页面加载之后才导出，这样图像就不能导出到word，资源中先把canvas生成的图片放到img中，在隐藏canvas，然后再导出，ok
html-docx-js, 在浏览器中，将HTML文档转换为 DOCX.zip
html-docx-js, 在浏览器中，将HTML文档转换为 DOCX html-docx-js这是一个非常小的库，它是将HTML文档转换为DOCX格式的cap，它由Microsoft和onward使用。 它通过使用称为'altchunks'的特性来在浏览器中执行转换。 简而言之，它允许将内容嵌入到不同的标
最新发布 纯前端导出word文件
jszip-utils是与jszip一起使用的跨浏览器的工具库jszip是一个用于创建、读取和编辑.zip文件的JavaScript库，且API的使用也很简单。FileSaver.js 是在客户端保存文件的解决方案，非常适合需要生成文件，或者保存不应该发送到外部服务器的敏感信息的应用。
继续访问
《web课程》第二节
宋体、黑软雅黑
继续访问
Javascript cloneNode无法克隆事件
cloneNode的使用 var box = document.querySelector('.box')// 影子克隆: 只克隆节点本身 var box1 = box.cloneNode(false)// 深度克隆: 克隆节点以及所有子节点 var box2 = box.cloneNode(true)无法克隆非内联事件 使用原生克隆方法之克隆属性和内联事件，对于通过事件...
继续访问
用Canvas实现截取网页内容保存为图片
最近有个客户提出需求，要把报表导出成电子版，什么格式都行。 当时我想啊，转成word、Excel不可取，转成pdf可以完整保留页面样式，所以就找各种html转pdf的插件，也试了pechkin、itextsharp等等，然后就发现一个致命的问题。 我的数据是js绑定的，页面里点和线的高度也是根据参照物在页面中的高度计算的，所以要等数据加载完成后再转换，而这两个插件都没转成功。 所以就想啊，只
继续访问
html5 canvas word,使用 HTML5 Canvas 进行数据可视化
图 1 已设置样式的空白 Canvas 元素使用画布时，您将在 JavaScript 中执行大多数工作，可通过 JavaScript 利用画布绘图上下文公开的 API 来 *** 作图面的每个像素。要获取画布绘图上下文，您需要从 DOM 获得您的 canvas 元素，然后调用该元素的 getContext 方法。var _canvas = document.getElementById('chart')...
继续访问
Python读取本地HTML中的canvas以图片形式存入Word文档
Python读取本地HTML中的canvas以图片形式存入Word文档
继续访问
jQuery wordExport实现网页导出word
最近项目上有个需求，需要把网页的内容导出word中（页面中包含echarts图和表格），通过后台实现需要重新写代码，修改起来太麻烦，于是找到了jquery的wordExport插件。 下载地址：https://github.com/Jasmine1227/jquery.wordexport.js 下载地址：https://github.com/eligrey/FileSave...
继续访问
Echart生成图片、自定义Echart、jquery-word-export 导出word文档
近期开发需求当中的导出word文档技术分享 使用技术： Echart "echarts": "^5.0.2", jquery "jquery": "^3.6.0", jquery.wordexport.js 代码详情 file-saver "file-saver": "^2.0.5", 使用 jquery.wordexport.js 导出的时候需要注意一些样式，只能写行内样式，还可以在 jquery.wordexport.js 内 style变量内写 的位置写例如： var styles = 'ta
继续访问
带样式的文本、表格、echarts图导出到word中整理思路梳理
年前一个需求扔了过来，就是把页面展示的文本、表格、echats图、等等等等，按照页面展示的样子导出到word中，还要纯前端完成。扯皮了很久之后，无奈的开始了各种百度+api的尝试。 一、首先尝试jquery+FileSaver+wordexport的方案 参考demo：wordExport 导出页面word文档格式 - 简书 可以导出页面上的文字和表格，但是样式必须写在行内，否则无效。 二、html-docx-js + raw-loader 方案 安装相关的组件 npm install -...
继续访问
html转word的原理,vue导出html、word原理
vue导出html、word原理日期：2020-06-10来源：程序思维浏览：1313次今天给大家说说如何用vue导出html静态页面和word的原理。由于导出word时，页面样式无法正常使用，因此整体页面采用table布局，仅在几个地方添加style样式，没有其余样式：/*** 当页面中有canvas时，我的做法是* 在页面中预先放置一个src为空的img标签* 点击导出时，将canvas转为b...
继续访问
【已实现】纯前端导出带echarts的word文档，内附完整实现代码
主要利用docxtemplater实现.
继续访问
前端导出word（包含图表）
前端导出word文档，包含（图表），先把canvas转成图片，再导出，还有点问题，不过功能实现了，不用通过后台，看到的大神可以留言提出改进的方法 代码如下： canvas转图片用的是html2canvas插件 Install：npm install html2canvas use:import html2canvas from ‘html2canvas’vue 组件代码： Vue组件内的js...
继续访问
html5 canvas word,HTML5 Canvas
Canvas 转为图片我们可以使用 Canvas2image 库将 canvas 转换为图片。使用方式如下：Canvas2Image.saveAsImage(canvasObj, width, height, type)Canvas2Image.saveAsPNG(canvasObj, width, height)Canvas2Image.saveAsJPEG(canvasObj, width, ...
继续访问
echarts图表截图保存成word文件的方法
echarts图表截图保存成word文件的方法
继续访问
wordExport导出word时关于echarts图表生成图片的解决方案
一、基本介绍 wordExport是一款基于前端处理生成word的处理方式 在对应页面引入FileSaver.js和jquery.wordexport.js 使用：需生成word的部分.wordExport(文件名,文件样式) 二、echarts相关 一般我们页面存在echarts图表导出word时通常时将其先生成为一张图片，再将其导出，在图表转变图片的这个过程中，经常会出现一些问题，经常会出现导出文档中的echarts图片生成不完整的情况，要么直接是一张破图，要么是一张未加载完成的图片，针对这类问题，
继续访问
js将html转为word文档,js将html导出到word文档（含echarts图表）
需求在开发项目途中遇到了一个需求，就是将一个整个HTML界面导出到word文档，其中包含了echarts图表，经过一番折腾，终于完成了~~~(鸡肋)，过程中用到了几个插件，总结了一下几个步骤，希望可以帮到大家。将插件导入项目顺序一定不能乱，顺序按照图中顺序导入，插件的源码网上搜一下很多的~~~注册echarts图表HTMl代码写一个空的div来存echarts图表js代码这里是引用的官方的例子，这...
继续访问
html画布显示PPT,【前端】有没有办法让HTML5 canvas显示/预览word/excel/powerpoint 文档？...
目前想实现类似百度文库那样的在线文档预览，但是他们使用的一般都是Flash，而HTML5 canvas可以在大多数情况下代替Flash，那么有没有办法让canvas显示/预览Office文档？如果不用Flash，目前唯一的方法是，用OpenOffice/LibreOffice或者在线服务(比如七牛里面第三方提供的文档转换服务)转换成PDF，然后用Mozilla的pdf.js来在线预览。回答其实不一...
继续访问
js导出页面中的canvas(包括但不限于echart渲染)到doc文档
问题由来 网上好多导出html到pdf的，今天来挑战下自己，试下能不能html导出到doc文档，网上有个方法是用wordexport.js这个库，但是这个库没法导出图片和canvas，那么只好重新找库，下面我们来分析！ 问题分析 我们只需要html中的图片，canvas能导出来即可，其他的简单，那么我们多方查证和测试，发现只有图片能导出到doc，也就是canvas要转换成img格式，图片的url还...
继续访问
canvas转word
echarts
前端
写评论
评论
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）