uniapp打开docx文件方法

1.安装

npm install docx-preview

npm install alloyfinger

2.完整代码如下

获取onLoad()中options参数的文档地址，赋值值给url

<template><div class="main" ref='main'><div class="word" :style="{ transform: `scale(${w})` }"><div id="bodyContainer" ref="wordDiv":style="{ 'transform': 'translate(' + posX + 'px,' + posY + 'px) translateZ(0px) scale(' + dis + ')' }"></div></div></div>
</template><script>
import { renderAsync } from "docx-preview";
import AlloyFinger from 'alloyfinger';
var initScale = 1;
export default {data() {return {docxOptions: {className: "kaimo-docx-666", // string：默认和文档样式类的类名/前缀inWrapper: true, // boolean：启用围绕文档内容的包装器渲染ignoreWidth: false, // boolean：禁用页面的渲染宽度ignoreHeight: false, // boolean：禁止渲染页面高度ignoreFonts: false, // boolean：禁用字体渲染breakPages: true, // boolean：在分页符上启用分页ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页experimental: false, // boolean：启用实验功能（制表符停止计算）trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xml 文档中移除 xml 声明useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURLuseMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）debug: false, // boolean：启用额外的日志记录},style: {},w: 0,url: null,posX: 0,posY: 0,dis: 1,}},onLoad(options) {console.log('asd',options.url)this.url = options.url},mounted() {if (this.url) {this.getFileFromUrl(this.url, 'word').then(res => {console.log(res)this.docxRender(res)})this.setScale()window.onresize = this.Debounce(this.setScale, 1000)this.setScale2()}},methods: {setScale2() {let speed = 1.5let min = .5new AlloyFinger(this.$refs.main, {pinch: (evt) => {console.log("实现缩放");this.dis = initScale * evt.zoom;if (this.dis < 1) this.dis = 1},pressMove: (evt) => {this.posX += evt.deltaX * speed;this.posY += evt.deltaY * speed;},multipointEnd: () => {initScale = this.dis;}})},docxRender(buffer) {let bodyContainer = document.getElementById("bodyContainer");renderAsync(buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型bodyContainer, // HTMLElement 渲染文档内容的元素,null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。this.docxOptions // 配置).then(res => {console.log(res.data)})},getFileFromUrl(url, fileName) {return new Promise((resolve, reject) => {var blob = null;var xhr = new XMLHttpRequest();xhr.open("GET", url);xhr.setRequestHeader('Accept', 'image/png');xhr.responseType = "blob";// 加载时处理xhr.onload = () => {// 获取返回结果blob = xhr.response;let file = new File([blob], fileName, { type: 'image/png' });// 返回结果resolve(file);};xhr.onerror = (e) => {reject(e)};// 发送xhr.send();});},setScale() {setTimeout(() => {let bodyContainer = document.getElementById("bodyContainer");// this.w =window.innerWidth / bodyContainer.offsetWidththis.w = window.innerWidth < 768 ? window.innerWidth / 768 : window.innerWidth / bodyContainer.offsetWidth// this.style = {//   transform: `scale(${w})`// }}, 200)},Debounce(fn, t) {const delay = t || 500let timerreturn function () {const args = argumentsif (timer) {clearTimeout(timer)}const context = thistimer = setTimeout(() => {timer = nullconsole.log(this.w, window.innerWidth, document.getElementById("bodyContainer").offsetWidth);fn.apply(context, args)}, delay)}},}
}
</script>
<style>
uni-page-body {background-color: white !important;
}
</style>
<style scoped>
.word {transform: scale(0.6);transform-origin: top center;transition: transform 0.4s;
}
</style>

uniapp打开docx文件方法相关推荐

uni-app打开docx文件
//预览 previewDocx(){uni.downloadFile({url: '服务器链接地址',success: (res) => {if (res.statusCode === 200 ...
打开Docx文件的方法
熟悉Word办公软件的朋友都应该知道,Word2003生成的文件格式是Doc的格式,而Word2007或Word2010生成的文件是Docx的.用Word2003是无法打开2007和2010中的Doc ...
怎样搜索计算机中docx格式的文件,教您电脑docx文件怎样打开呢?教你正确打开docx文件...
很多朋友通过word2003软件发现无法打开docx格式的文件,其实是由于word2003文件默认格式是doc,所以docx格式的文件需要word2007以上的版本才能打开,那么下面让小编教你如何打开 ...
Docx文件怎么打开，如何打开Docx文件？
熟悉Word办公软件的朋友都应该知道,Word2003生成的文件格式是Doc的格式,而Word2007或Word2010生成的文件是Docx的.用Word2003是无法打开2007和2010中的Doc ...
如何打开.docx文件？
今天收到一份扩展名为docx的文件,原本以为是谁不小心在doc后面加了个x的,把x去掉后准备用word打开~居然是乱码~,上网一搜,原来docx是word2007的文件~太落伍了~居然不知道~_~! ...
如何打开docx文件
如何打开docx文件? 最直接有效的一种方法就是安装office2007,这点大家应该都知道.不过有时候手边没有 office2007怎么办? 比如你去同学或者朋友家,给他看些好玩的: 比较常见的 ...
php 打开docx文件怎么打开,docx怎么打开怎么在网页上打开docx文件
Smarty的date_format总是提示参数不对,按照手册的index.php <?php require_once './init.inc.php'; $smarty->displa ...
php 打开docx文件,通过Php提供.docx文件
尝试使用Php提供.docx文件时遇到问题.上传文件时,我检测文件mime类型,并使用基于mime类型的正确扩展名的文件上传文件;例如下面: application/msword - doc appl ...
html加密文档如何打开,如何打开docx文件在弹出窗口中选择加密的文件
如何打开docx的文件,我的office打不开在电脑桌面上找到需要打开的docx文件,并右键打开菜单. 在打开的菜单界面中,找到打开方式选项,并单击选择. 在跳转的打开方式界面中,选择wps应用程序 ...

uniapp打开docx文件方法

uniapp打开docx文件方法相关推荐

最新文章

热门文章