Comments (2)
Have you know how to do it? if yes, you can add a comment under this issue
from vue-mathjax.
I have somewhat figured this out. Using domToImage, it is possible to save the rendered formula into SVG, JPG or PNG:
Using the code-snippet below i was able to select the formula preview and save it as image:
<template>
<div>
<v-textarea v-model="formula" no-resize outlined name="formula-input" label="Latex Formula"></v-textarea>
<vue-mathjax id="putty" :formula="getFormulaInput"></vue-mathjax>
<v-btn color="primary" class="ma-5" @click="saveAsSVG">
Save as SVG
</v-btn>
</div>
</template>
<style scoped>
a {
text-decoration: none;
}
</style>
<script>
import { VueMathjax } from 'vue-mathjax'
import domtoimage from 'dom-to-image';
export default {
name: "TMathjaxViewer",
components: {
'vue-mathjax': VueMathjax
},
data () {
return {
formula: 'x = {-b \\pm \\sqrt{b^2-4ac} \\over 2a}'
}
},
computed: {
getFormulaInput() {
return '$$' + this.formula + '$$';
}
},
methods: {
getMathElement() {
/*
* I dont know a better way to do this, but what we try to do here is the following:
* We want to select the HTML element on the page that contains the rendered formula.
* Our top-level reference to this element is the 'putty' element. From here we have
* to select: 'MathJax_Display > MathJax-Element-1-Frame > nobr > MathJax-Span-1'.
* This selection path is implemented below.
*/
return document.getElementById("putty").children [1].children [0].children [0].children [0];
},
saveAsSVG() {
var element = this.getMathElement();
domtoimage.toSvg(element)
.then(function (dataUrl) {
var img = new Image();
img.src = dataUrl;
var link = document.createElement("a");
document.body.appendChild(link); // for Firefox
link.setAttribute("href", img.src);
link.setAttribute("download", "formula.svg");
link.click();
})
.catch(function (error) {
console.error('Something went wrong!', error);
});
}
}
}
</script>
As a fully working example, you can inspect my modified version of mathjax-viewer.
from vue-mathjax.
Related Issues (20)
- How do I prevent MathJax from showing raw TeX while waiting for rendering to complete? HOT 5
- Cannot align display equation using &= method HOT 1
- HTML5 | MathML <mrow> Tag HOT 1
- HTML tags rendered as string in DOM HOT 2
- @justforuse I am trying to use vue-mathjax in my nuxt project. I have tried evrything and copied and pasted the code from the codesandbox but I am still getting plain text. May you help? HOT 4
- typescript support
- Unclear where to put <src> pointer to MathJax HOT 1
- how to use in nuxt js? HOT 1
- Rendering string inside () HOT 2
- AsciiMath HOT 1
- Using vue-mathjax without npm HOT 1
- demos do not work HOT 1
- note: Not compatible with MathJax@3 HOT 1
- Can be used in Vue3? HOT 1
- how to import [email protected] in vue as local dependency? HOT 1
- How to set enableMenu to false? HOT 2
- Library not working with the latest MathJax implementation HOT 1
- Dependency Dashboard
- How to config customize;just like MathJax.Hub.Config({...}) HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-mathjax.