vue-doc-preview

A vue document preview component, this component will display the contents of the document on the page.

English Readme | 中文说明书

Live Demo

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 | ''

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

1. 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.
2. You can debug the components after development by running the test environment.
3. You can show document by a url and this component will automatically download it by the url.
4. 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