vue-doc-preview
A vue document preview component, this component will display the contents of the document on the page.
English Readme | 中文说明书
Use
import
First, add this package from yarn or npm.
yarn add vue-doc-preview
or
npm i vue-doc-preview --save
Then, import this component in .vue file.
<template>
<VueDocPreview :value="docValue" :type="docType" />
</template>
<script>
import VueDocPreview from 'vue-doc-preview'
export default {
components: {
VueDocPreview
}
}
</script>
You also can open demo.vue(which in src) to learn how to use this component, but it is introduced directly to the component from the source code.
Example
<VueDocPreview value="# VueDocPreview\n**Markdown Test**```" type="markdown" />
<VueDocPreview value="newteach.pbworks.com%2Ff%2Fele%2Bnewsletter.docx" type="office" />
<VueDocPreview value="Normal Text" type="text" />
<VueDocPreview value="function () {\n console.log('VueDocPreview')\n}" type="code" code="javascript"/>
Config
prop | description | type | default |
---|---|---|---|
value | document contents or office document's url | String | '' |
type | document type (Now supported types are 'markdown'、'office'、'text' of 'code') | String | 'md' |
language | code language (It takes effect only when the type is 'code') | String | '' |
height | when height > 100 it means that the component's height is hight+'px', otherwise it means that the component's height is hight+'%' | Number | 90 |
mdStyle | markdown view custom style (It takes effect only when the type is 'markdown' or 'code') | Object | null |
textStyle | text view custom style (It takes effect only when the type is 'text') | Object | null |
url | document's url, but it only takes effect only when we don't set value (this property can also be used in office documents) | String | '' |
requestConfig | axios config | Object | {} |
Supported document types and their suffix(language)
- markdown: md
- office: docx, pptx, xlsx
- text: txt
- code: javascript(js)、html、css、java、json、typescript(ts)、cpp、xml、bash、less、nginx、php、powershell、python、scss、shell、sql、yaml、ini
Custom style
Now, we can customize markdown view style by setting mdStyle in props.
These tags can be customized: pre, code, ul, ol, li, hr, blockquote, img, a, table, tr, th, td.
In this example we will customize the style of code block in markdown view.
// template
<VueDocPreview value="# VueDocPreview" type="markdown" :mdStyle="mdStyle" />
// script
export default {
data: function() {
return {
mdStyle: {
pre: {
'background-color': 'rgb(187, 255, 255)'
},
code: {
'background-color': 'rgb(187, 255, 255)',
'line-height': '20px'
}
}
}
}
}
Development
Compiles and hot-reloads for development
yarn run serve
Compiles and minifies for production
yarn run build-lib
Run test for development
yarn run test
Lints and fixes files
yarn run lint
Some tips
- Markdown preview use highlight.js to make code show different colors, you are able to modify src/lib/highlight.js to support more language with code highlight.
- You can debug the components after development by running the test environment.
- You can show document by a url and this component will automatically download it by the url.
- The priority of prop value is higher than that of prop url, if you set prop value with a nonempty value, the prop url will be ignored.
License
MIT