JSFiddle - React, Tailwind, and code Playground

by borsna

HTML

<script src="https://citation.js.org/src/citation.min.js"></script>
<div id="datasets">
  <citation doi="10.5878/6ctk-2b56" callback-csl="/sv/citation/study/snd1010/1/7.0">
  Göteborgs universitet, SOM-institutet. Göteborgs universitet, SOM-institutet (2020). Den nationella 
  SOM-undersökningens kumulativa dataset 1986-2018. Svensk nationell datatjänst. Version 7.0. 
  https://doi.org/10.5878/6ctk-2b56
  </citation>
  
  <br />
  
  <citation>apa</citation>
</div>

JavaScript

const Cite = require('citation-js')
  
Vue.component('citation', {
  data: function () {
    return {
      citation: '',
      defaultCitation: '',
      style: {'style': 'default'},
      cite: null,
      styles:[
      	{'style':'default', 'text':'SND'},
        {'style':'bibtex', 'text':'BibTeX', 'format':'text'},
        {'style':'ris', 'text':'RIS', 'format':'text'},
      ]
    }
  },
  props: ['doi', 'callbackCsl'],
  mounted: function () {
  	if(this.$slots.default){
  		this.citation = this.$slots.default[0].text.trim();
    }
    this.cite = new Cite(this.doi)
  },
  methods: {
    onChange:function(event){
    	if(this.style.style == 'default'){
      	this.citation = this.defaultCitation
        return
      }
      this.citation = this.cite.format(this.style.style, {format: this.style.format})      
    },
  	download: function(){
    	  var element = document.createElement('a');
        element.setAttribute('href', 'data:text/plain;charset=utf-8,' + 
        encodeURIComponent(this.citation));
        element.setAttribute('download', 'fil.txt');

        element.style.display = 'none';
        document.body.appendChild(element);

        element.click();

        document.body.removeChild(element);
    },
    copy: function(){
      if (!navigator.clipboard) {
        this.fallbackCopyTextToClipboard(this.citation);
        return;
      }
      navigator.clipboard.writeText(this.citation).then(function() {
        console.log('Async: Copying to clipboard was successful!');
      }, function(err) {
        console.error('Async: Could not copy text: ', err);
      });
    },
    fallbackCopyTextToClipboard: function (text) {
      var textArea = document.createElement("textarea");
      textArea.value = text;

      // Avoid scrolling to bottom
      textArea.style.top = "0";
      textArea.style.left = "0";
      textArea.style.position = "fixed";

      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();

     ...