vue项目实现打印预览、生成（导出）文档功能

这个功能其实也是自己学习到的，做完也有一段时间了，一直想记录总结一下，但一直没时间，今天总算闲了一点，趁一大早活还没找上门来，赶紧抓住时间鸭！

1、打印预览
打印预览说白就是实现快速跳转新页面预览信息，新页面有打印按钮，绑定方法调起系统打印机实现打印功能。

本来我以为这个功能还要将文件先下载下来，再在浏览器进行打开。但doc和docx格式是无法直接在浏览器中显示的，还需要转换为浏览器支持的格式，这样会很麻烦。所以，如果在文件格式统一的情况下，我们可以再写一个页面，模拟文档的格式进行排版，制作一个模板，打开页面的时候调用接口填充信息即可，打印功能也可以写在模板页面。

新页面上代码

<template>
<div class="print-container">
<!-- 这里是模板信息 -->
<p class="title"><span>个人信息</span>
</p>
<p><span class="normal-text">姓名：</span><span class="value-text">{{detail.name}}</span>
</p>
<p><span class="normal-text">年龄</span><span class="value-text">{{detail.age}}</span>
</p><div class="btn"><Button class="btn-def" type="primary" size="large" @click="$router.go(-1)">关闭</Button><Button class="btn-def" type="primary" size="large" @click="print">打印</Button>
</div>
</div>
</template>
<script>
export default {name:'Print',data () {return {complainId: 0,detail: {},url : ''// 这里是获取具体信息内容的接口地址}},mounted () {this.complainId = this.$route.query.id //拿到跳转路由时携带的id this.loadDetail() //请求接口 拿到信息}methods: {loadDetail () {this.$http.get(this.url+'?id='+this.complainId).then(res => {this.detail = res.result})},print () {window.print() //调用系统打印机}}
}
</script>
<style lang="less" scoped>
.print-container{width: 210mm;margin: 0 auto;padding: 10mm;.title{font-size: 8.47mm;text-align: center;font-family: '黑体';span{margin: 0 auto;}margin-bottom: 30px;}p{font-size: 5.29mm;font-family: '宋体';color: #000;display: flex;margin-bottom: 10px;min-height: 30px;.value-text{flex:1;padding: 0 15px;border-bottom: 1px solid #000;}}.btn{text-align: center;margin-top: 50px;.btn-def{margin: 0 20px;}}
}@media print {.btn{display: none;}}</style>

ok 以上就完成了打印预览的功能

2、生成（导出）文档
实现点击，直接在浏览器左下角下载文件（如图）无须跳转页面和我们平时下载图片或者文件一样的效果

代码实现：

 downloadTemp (file) {let a = document.createElement('a')a.setAttribute('download', 'temp')// download属性a.setAttribute('href', file)// href链接a.click()},download() {let downLoadUrl = window._CONFIG['domianURL']+this.url.download+'?id='+this.idthis.downloadTemp(downLoadUrl)},

重点在downloadTemp方法传入一个下载地址即可

好了，以上就是今天整理的方法啦现在已经是下午三点多了。。。
没错，上午活找上门了（摊手）ε=(´ο｀*)))
其实平时很想经常整理知识点的嗯…由于各种原因吧就…好吧我也挺懒￣□￣

我发现我可真是个话痨￣□￣｜｜

溜┏(＾0＾)┛

vue项目实现打印预览、生成（导出）文档功能相关推荐

SAP SmartForms PDF Preview Test 打印预览生成PDF文件
SAP SmartForms PDF Preview Test 打印预览生成PDF文件 *&-------------------------------------------------- ...
在线预览doc,docx文档
在线预览doc,docx文档前言:上传成功以后的每个文档都能获取到所传文件的路径; 我这里是一个maven项目,需要在pom文件引入 <dependenc ...
IOS 预览pdf,word文档的集中方式
在iPhone中可以很方便的预览文档文件,如:pdf.word等等,这篇文章将以PDF为例.介绍三种预览PDF的方式,又分别从本地pdf文档和网络上的pdf文档进行对比. 预览本地PDF文档: 1.使 ...
利用微软的Office Online在线预览播放Office文档，无工具栏
利用微软的Office Online在线预览播放Office文档通过微软的在线预览URL链接可以直接打开在线PPT文档如下 https://view.officeapps.live.com/op/v ...
python生成word文档_python实现的生成word文档功能示例
本文实例讲述了python实现的生成word文档功能.分享给大家供大家参考,具体如下: 每月1次的测试费用报销,需要做一个文档.干脆花点时间写个程序吧. # -*- coding: utf-8 -*- ...
python 自动生成word文档,python实现的生成word文档功能示例
python实现的生成word文档功能示例发布时间:2020-09-23 11:37:44 来源:脚本之家阅读:108 作者:zhizunyu2009 本文实例讲述了python实现的生成word ...
python 自动生成word文档_python实现的生成word文档功能示例
本文实例讲述了python实现的生成word文档功能.分享给大家供大家参考,具体如下: 每月1次的测试费用报销,需要做一个文档.干脆花点时间写个程序吧. # -*- coding: utf-8 -*- ...
vue项目实现前端预览word和pdf格式文件
最近做vue项目遇到一个需求,就是前端实现上传word或pdf文件后,后端返回文件对应的文件流,前端需要在页面上展示出来.word预览简单一些,pdf预览我试过pdfjs,vue-pdf总是报各种奇奇 ...
js预览本地word文档_Github+docsify打造在线文档
效果图如下预览链接:https://a870439570.github.io/interview-docs 快速开始首先先安装好npm和nodejs,这里就不做过多介绍了自信安装即可 (http ...

vue项目实现打印预览、生成（导出）文档功能

vue项目实现打印预览、生成（导出）文档功能相关推荐

最新文章

热门文章