<template> <div> <el-button @click="downLoad">点击下载word文件</el-button> <!-- <el-button @click="downLoadPdf">点击下载pdf文件</el-button> --> <div class="docWrap"> <!-- 预览文件的地方(用于渲染) --> <div ref="file"></div> </div> </div> </template> <script> import { renderAsync } from 'docx-preview'; import Api from '~/service/Api'; import commonProcess from '~/mixin/commonProcess'; export default { data() { return { model: { docXML: '' }, pdf: '', }; }, mixins: [commonProcess], mounted() { this.goPreview () }, methods: { async goPreview () { let params = window.opener["params"]; let blob = params.blob renderAsync(blob, this.$refs.file) this.$nextTick(() => { let dom = document.querySelector('.docWrap') dom.style.height = '100vh' dom.style.overflow = 'auto' }) }, async downLoad () { let params = window.opener["params"]; let blob = params.blob let docnam = params.docnam this.fileDownLoad(docnam,blob) }, fileDownLoad(docnam,blob){ let a = document.createElement("a"); //创建一个<a></a>标签 a.href = URL.createObjectURL(blob); // 将流文件写入a标签的href属性值 a.download = docnam; //设置文件名 a.style.display = "none"; // 障眼法藏起来a标签 document.body.appendChild(a); // 将a标签追加到文档对象中 a.click(); // 模拟点击了a标签,会触发a标签的href的读取,浏览器就会自动下载了 a.remove(); // 一次性的,用完就删除a标签 }, async downLoadPdf () { let params = window.opener["params"]; let docnam = params.docnam let rtnmsg = await Api.post('/service/gitopn/download', this.wrapper(docnam)); if (rtnmsg.respCode == SUCCESS) { let base64Str = rtnmsg.data.download; let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串,base-64 编码使用方法是 btoa() let length = bstr.length; let u8arr = new Uint8Array(length); // 创建初始化为0的,包含length个元素的无符号整型数组 while (length--) { u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码 } let blob = new Blob([u8arr]); let index = docnam.lastIndexOf("."); docnam = docnam.substring(0,index)+".pdf"; this.fileDownLoad(docnam,blob) } } } }; </script> <style scoped></style>