前端技术库拓展

git@github.com:gjTool/pdfh5.git

//main.ts
import 'pdfh5/css/pdfh5.css';

<script setup lang="ts">
import Pdfh5 from 'pdfh5';
import { ref, onMounted } from 'vue';
const demo = ref()
onMounted(() => {
  new Pdfh5(demo.value, {
    pdfurl: "./git.pdf",
    textLayer: true
  });
});
</script>

<template>
  <div class="demo" ref="demo"></div>
</template>

<style scoped>
.demo {
  width: 100%;
  height: 100%;
}
</style>

{
  "name": "parent-aiwrongbook-h5",
  "version": "0.0.1",
  "private": true,
  "type": "module",
  "dependencies": {
    "pdfh5": "^2.0.2"
  },
  "optionalDependencies": {
    "canvas": "^2.11.2",
    "path2d-polyfill": "^2.0.1"
  },
  "browser": {
    "canvas": false,
    "fs": false,
    "http": false,
    "https": false,
    "url": false,
    "zlib": false
  }
}

npm install masonry-layout

<script>
    import Masonry from 'masonry-layout';
    var elem = document.querySelector('.grid');
    var msnry = new Masonry( elem, {
        // options
        itemSelector: '.grid-item',
        columnWidth: 200
    });

    // element argument can be a selector string
    //   for an individual element
    var msnry = new Masonry( '.grid', {
        // options
    });
</script>