Vue导出word+echarts,pdf
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Vue导出word+echarts,pdf,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4992字,纯文字阅读大概需要8分钟。
内容图文
文件导出
word导出
// 这是word导出需要的插件
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
// 这是在模板中书写简单的JS代码的插件
import expressions from 'angular-expressions'
import merge from 'lodash/merge'
// 这里是官网写的应该是处理图片的代码,照着写就行,没动过
// dataURL 是转化成base64之后的字符串
base64DataURLToArrayBuffer(dataURL) {
const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/
if (!base64Regex.test(dataURL)) {
return false
}
const stringBase64 = dataURL.replace(base64Regex, '')
let binaryString
if (typeof window !== 'undefined') {
binaryString = window.atob(stringBase64)
} else {
binaryString = new Buffer(stringBase64, 'base64').toString('binary')
}
const len = binaryString.length
const bytes = new Uint8Array(len)
for (let i = 0; i < len; i++) {
bytes[i] = binaryString.charCodeAt(i)
}
return bytes.buffer
},
// 导出word函数
exportWordFile() {
this.getWordData() // wordData 函数,处理word模板需要的数据结构
const that = this
// 引入下载的模板
// const docxUrl = process.env.BASE_URL
// 这里要引入处理图片的插件,下载docxtemplater后,引入的就在其中了
// 将 test.docx 模板文件放在 public 文件夹下,用node全局变量引入,打包后也可生效
const ImageModule = require('docxtemplater-image-module-free')
JSZipUtils.getBinaryContent(`${process.env.BASE_URL}test.docx`, function(error, content) {
if (error) {
throw error
}
const opts = {}
opts.centered = true
opts.fileType = 'docx'
opts.getImage = (tag) => {
return that.base64DataURLToArrayBuffer(tag)
}
opts.getSize = () => {
return [600, 200]// 这里可更改输出的图片宽和高
}
// 下面这个函数就是处理在模板中简单的JS代码的,如果不需要,可以选择删除,在import 中最后的两行插件可以不用引入
const angularParser = function(tag) {
if (tag === '.') {
return {
get: function(s) { return s }
}
}
const expr = expressions.compile(
tag.replace(/(’|‘)/g, "'").replace(/(“|”)/g, '"')
)
return {
get: function(scope, context) {
let obj = {}
const scopeList = context.scopeList
const num = context.num
for (let i = 0, len = num + 1; i < len; i++) {
obj = merge(obj, scopeList[i])
}
return expr(scope, obj)
}
}
}
const zip = new PizZip(content)
const doc = new Docxtemplater()
doc.attachModule(new ImageModule(opts))
doc.setOptions({ parser: angularParser })
doc.loadZip(zip)
doc.setData({
...that.wordData // 我的最外层包裹一切要导出的数据名称
})
try {
doc.render()
} catch (error) {
const e = {
message: error.message,
name: error.name,
stack: error.stack,
properties: error.properties
}
console.log(JSON.stringify({
error: e
}))
throw error
}
const out = doc.getZip().generate({
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
})
const downLoadFileName = that.monitorObj + '_' + that.downloadTime
saveAs(out, downLoadFileName) // 导出为word
})
}
word 模板介绍
// 一般数据格式
data: [
{
text: '111'
},
{
text: '222'
}
]
// word 模板中使用
//{#data}
//{text}
//{/data}
// 上述方法可以简单的循环data数组中的item
// 有一种情况就是根据勾选的选项,动态下载word
// 就需要用简单的JS代码在word 模板中控制,data 必须是数组
// {#data.length > 0}
// {text}
// {/}
// 其他需要下载的项。。。。
// 另外的数据循环方式
// {-w:p data}{text}{/data}
word 模板中图片的下载
// 在Echarts的组件中,需要写如下代码
myChart.on('finished', _ => {
this.$refs.myChart['getDataURLs'] = myChart.getDataURL({
pixelRatio: 1,
excludeComponents: ['toolbox']
})
})
// 调用 echarts 的finised 函数,图画完后获取到图的base 64 字符串
// 然后在父组件中取到子组件的 URL
// currentChartName 父组件中chart 的ref name
// componentsChartName 子组件中 chart 的 ref name
const url = this.$refs[currentChartName].$refs[componentsChartName].getDataURLs
// 将 url 放在导出的 word 数据对象中即可
const data: [
{
chartUrl: url
}
]
// 在 word 模板中如下使用,% 是图片输出,%% 是居中
// {%%chartUrl}
PDF 的导出
pdf.js
// 引入插件
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export default {
install(Vue, options) {
Vue.prototype.getPdf = function(title) {
html2Canvas(document.querySelector('#pdfDom'), { // 使用页面的总DIV 的ID,比如 el-col
allowTaint: true,
useCORS: true
// scale: 2 // 提升画面质量,但是会增加文件大小
}).then((canvas) => {
// 以下大小经过测试比较合适,可以根据自己的需要,一点点调整
const contentWidth = (canvas.width + 100) * 0.2
const contentHeight = (canvas.height + 200) * 0.2
/* 导出不分页处理 */
const pageData = canvas.toDataURL('image/jpeg', 1.0)
const img = new Image()
img.src = pageData
const imgWidth = (canvas.width) * 0.195
const imgHeight = (canvas.height) * 0.195 // 内容图片这里不需要留白的距离
let PDF
img.onload = function() {
if (contentWidth > contentHeight) {
PDF = new JsPDF('l', 'mm', [contentWidth, contentHeight])
} else {
PDF = new JsPDF('p', 'mm', [contentWidth, contentHeight])
}
PDF.addImage(pageData, 'jpeg', 10, 10, imgWidth, imgHeight)
PDF.save(title + '.pdf')
}
})
}
}
}
main.js
中全局声明
import exportPDF from '@/utils/exportPDF'
Vue.use(exportPDF)
father.vue
中使用
<el-button type="primary" size="small" style="float: right" @click="exportPdf">
下载PDF
</el-button>
exportPdf() {
this.getPdf('lalala')
}
内容总结
以上是互联网集市为您收集整理的Vue导出word+echarts,pdf全部内容,希望文章能够帮你解决Vue导出word+echarts,pdf所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。