Проект Vue использует pdf.js

Vue.js

Некоторое время назад был проект, который поддерживает функцию онлайн-обучения.Есть функция предварительного просмотра учебных материалов в формате pdf в Интернете.Я просто хочу просмотреть pdf в Интернете, потому что большинство браузеров поддерживают открытие файлов pdf, поэтому поместите iframe напрямую, а затем src pdf Адреса файла недостаточно, так просто! ! (Что? Совместимость? Что такое совместимость? (づ￣3￣) づ Не Chrome, не разговаривайте со мной)

Я думал, что это так, но, к сожалению, лидеры пришли, чтобы поднять спрос.Мы являемся платформой для поддержки преподавания и обучения, поэтому содержание pdf должно поддерживать копирование, и поскольку учитель хочет читать лекции, это лучше всего для поддержки аналогичного PPT Функция воспроизведения... Молчаливая, браузер поддерживает копирование прямо при открытии, но какая к черту функция воспроизведения! (Я такой несчастный человек)

Tucao, давайте честно реализовывать функцию, но GitHub нашел круг pdf-колес для проекта vue, которые в принципе одинаковые.Основная идея — использовать canvas для отрисовки pdf-контента, но самая большая проблема — pdf. способ вообще скопировать контент, первое требование не удовлетворено, нет другого пути, кроме как расширить область поиска, и, наконец, нацелился на pdf.js, на официальном сайтеdemoПопробовал здесь, и потребности руководителя полностью удовлетворили, поэтому мне оставалось только преодолеть все трудности и внедрить в проект pdf.js.

Импортируйте плагин pdf.js

1. Скачайте исходный пакет с официального сайта

наклеитьадресЕсли не хотите наступить на яму, просто честно скачайте стабильную версию.

2. Поместите в проект

Поместите его в статический каталог проекта vue, и структура каталогов будет следующей:

3. Измените некоторую исходную конфигурацию

Поскольку pdf.js не поддерживает междоменную загрузку файлов, прямая загрузка не удастся. Будет сообщено об ошибке «происхождение файла не соответствует средству просмотра», поэтому вам нужно закомментировать строку, которая выдает ошибку в файле viewer.js.Эта модификация заключается в том, чтобы прочитать блог этого старика и вставить адрес его статьи:Ссылка на сайт

Использование проекта

Он очень прост в использовании, поместите iframe на страницу, затем src будет равен относительному пути к viewer.html, а затем файл = путь к файлу, возвращаемый бэкендом'/static/pdfjs/web/viewer.html?file=' + pdfVisitUrl, так что вы сделали ....... Неудивительно! ! ! В яму еще надо залезть.Конечно лучше открыть парсинг фронтенда в виде файла обратного потока бекенда.Для этого можно заглянуть в блог выложенный выше.

яма 1

Поскольку сервер возвращает ссылку на файл, но чтобы обеспечить конфиденциальность файла и предотвратить прямое копирование ссылки другим людям, а другие могут открыть и использовать эту проблему, бэкэнд-разработчики добавили некоторые чувствительные ко времени токены. после ссылки на файл примерно так, а потом ссылка на файл становится такойhttp://10.20.124.151/group1/M00/00/02/ChR8l1zBdSuAXoATAAvc4itpNIU648.pdf?token=ee94d7d3b3452c62b18364698839834b, но pdf.js по умолчанию разрешает только простые пути, потому что pdf.js не может определить, является ли токен параметром viewer.html или параметром файла для предварительного просмотра, поэтому необходимо сначала закодировать возвращенную ссылку на файл с помощью encodeURIComponent

<iframe
    :src="`/static/pdfjs/web/viewer.html?file=${encodeURIComponent(pdfVisitUrl)}`"
    frameborder="0"
    class="pdf-window"
>
</iframe>

В данном случае яма пройдена.

яма 2

После решения вышеуказанных проблем, вы чувствуете, что это почти то же самое?Могу ли я сказать, что в это время моя программа все еще не может работать, и страница по-прежнему черная? Поскольку pdf.js вообще не распознается и не упаковывается как статический ресурс, относительный путь вообще не может быть найден.Я использовал npm run build для упаковки и попробовал его и обнаружил, что pdf.js не может быть найден в упакованном файле по адресу все.

Позже я изучил веб-страницу и обнаружил, что плагин copy-webpack-plugin в основном используется для статической упаковки ресурсов, поэтому добавьте следующий код в два файла webpack.prod.conf.js и webpack.dev.conf.js.

const CopyWebpackPlugin = require('copy-webpack-plugin')

new CopyWebpackPlugin([
    {
    from: path.resolve(__dirname, '../src/static'), // 这个路径使用的是static目录相对于当前js文件的相对路径
    to: config.dev.assetsSubDirectory,
    ignore: ['.*'] // 匹配所有，把static目录下文件一股脑全部作为静态资源打包，省的一些幺蛾子
    }
])

Сохраняем, перезапускаем npm dev, на этот раз наконец-то ojbk, можно умываться и спать

Однако позже я посмотрел на другие версии vue-cli и обнаружил, что многие версии могут напрямую упаковывать pdf.js как статический ресурс.Возможно, эта версия, используемая в нашем проекте, является ямой, поэтому, если вы найдете статические ресурсы, обычно просто игнорируйте яму 2.

Пришло время увидеть, будьте готовы уйти с работы

Категории