معاينات PDF المضمنة

ممتاز! شكرًا لك @Johani. يمكنني تأكيد أن الأمر يعمل الآن في جميع المتصفحات الثلاثة.

4 إعجابات

رائع - هذه تحسينات قوية ويتطلب تحقيقها الكثير من الجهد. شكرًا لاستماعكم إلينا، أيها المتآمرون المزعجون قليلًا في عالم الاستضافة الذاتية!

هل يعمل المكون الآن مع عمليات التحميل إلى S3؟

3 إعجابات

لم أجرب ذلك، لكنه يجب أن يعمل إذا كانت الدلو (bucket) مُهيأة بشكل صحيح. يقوم هذا المكوّن بإرسال طلب لتحميل ملف PDF.

discourse-pdf-previews/javascripts/discourse/initializers/initialize-for-pdf-preview.js at main · discourse/discourse-pdf-previews · GitHub

يتم حظر هذه الأنواع من الطلبات التي تُنفَّذ في JavaScript إذا لم يُسمح للمصدر بالوصول إلى الملف. وعندها ستواجه خطأ CORS. إذا فتحت وحدة التحكم (console)، فستلاحظ على الأرجح رسالة مشابهة لهذا:

image

لا يستطيع المكوّن فعل الكثير حيال ذلك. فكل شيء يجب أن يُعالج في إعدادات S3 الخاصة بك. يجب السماح للمصدر - وهو نطاق Discourse الخاص بك - بإرسال مثل هذه الطلبات لتجنب مشاكل CORS.

9 إعجابات

شكرًا لك! سأغتنم الفرصة بجرأة للعودة إلى S3 قريبًا.

اقتراح آخر: استخدام علامة التبويب عند وجود مسافة قبل اسم الملف

ما أريده هو أن يكون ملف PDF مدمجًا بشكل افتراضي، وأن يُفتح في علامة تبويب جديدة إذا تم إضافة مسافة في اسم الملف. هذا يمنح المؤلفين خيارًا لكل ملف PDF بين العرض المدمج أو فتحه في علامة تبويب، بدلاً من تحديد ذلك لكل مكون.

ربما يجب أن يكون إعداد المكون هو “ما هو السلوك الافتراضي الذي تريده؟”، وإذا تم إضافة مسافة، فسيتم تطبيق السلوك الآخر.

أو بديلًا عن ذلك، يمكنك سؤال المستخدم عما يجب أن تفعله المسافة (عرض مدمج / فتح في علامة تبويب / تنزيل).

إعجابَين (2)

أرغ! يعرض كروم مرة أخرى مربعات رمادية فقط. فايرفوكس وسفاري على ما يرام.

3 إعجابات

هل يقوم مكون السمة هذا بإرسال ملف PDF إلى مترجم خارجي؟
لقد قمت بتفعيل “الوسائط الآمنة” لأنني أريد تجنب تحميل الملفات بواسطة خدمة خارجية.

إعجاب واحد (1)

اكتشفت أن السبب هو الكود التالي:

<a class="attachment pdf-attachment" href="...pdf">doc.pdf
  <iframe src="blob:..." height="500" loading="lazy" class="pdf-preview">
  </iframe>
</a>

إذا قمت باستبدال الكود أعلاه بالكود التالي:

<a class="attachment pdf-attachment" href="...pdf">doc.pdf</a>
<iframe src="blob:..." height="500" loading="lazy" class="pdf-preview"></iframe>

ستعمل المشكلة.
لكنني لست متأكدًا من كيفية إصلاح ذلك في الكود الحالي.

5 إعجابات

@Johani
يرتبط الخطأ بالكود التالي، من السطر 34 إلى 41:

        const setUpPreviewType = (pdf) => {
          if (previewMode === "Inline") {
            const preview = createPreviewElement();
            pdf.classList.add("pdf-attachment");
            pdf.append(preview);

            return preview;
          }
4 إعجابات

يبدو أن هذا الحل يعمل مع جميع المتصفحات.

4 إعجابات

يبدو أن pdf.parentNode.append(preview); تحل المشكلة (ولكن في حالة وجود ملفات PDF متعددة، تظهر المعاينات أسفل جميع الروابط وليس أسفل كل رابط على حدة)

3 إعجابات

لكن إذا كان العنصر الأب هو الفقرة، فلا ينبغي أن تكون هذه مشكلة لأن الرابط وiframe سيكونان داخل وسم الفقرة.

للتجاوز من هذه المشكلة، يمكنك ببساطة إضافة سطر جديد بين المرفقات:

[doc1.pdf|attachment](...)

[doc2.pdf|attachment](...)

وبحلول حلّك، سيُعرض معاينة PDF بشكل صحيح في Chrome أيضًا.

3 إعجابات

لقد دفعت للتو بعض التغييرات.

نعم، هذا أكثر منطقية من تجاهل الملف. إليك كيف ستعمل الأمور بعد التحديث.

  1. إذا قمت بتعيين الإعداد إلى “علامة تبويب جديدة”، فلن يرفق المكون أي معاينة في المنشورات. عند النقر على الرابط، سيفتح ملف PDF في علامة تبويب جديدة.

  2. إذا قمت بتعيين الإعداد إلى “مضمن”، سيربط المكون معاينة في المنشور لجميع ملفات PDF بشكل افتراضي. إذا بدأ اسم الملف بمسافة، فلن يرفق المعاينة، ولكن عند النقر على الرابط سيفتح ملف PDF في علامة تبويب جديدة بدلاً من تنزيله.

    جميع عارضات ملفات PDF الأصلية في المتصفح تحتوي على زر تنزيل، لذا يمكنك تنزيله من هناك إذا أردت.

شكرًا لك على التصحيح والتفاصيل @sharewoodsDavid. اتضح أن وسوم <iframe> داخل وسوم <a> تفشل في التحقق من الصحة.

يجب ألا يظهر العنصر iframe كعنصر تابع للعنصر a

لذلك، فإن إصلاحك دقيق. قمت بإجراء هذا التغيير في طلب الدمج (PR) أعلاه.

إذا كنت تريد إضافة عنصر بعد عنصر آخر، يمكنك استخدام after() كما يلي:

someElement.after(newElement)

إذا كنت تريد إضافة عنصر قبل عنصر آخر، يمكنك استخدام insertBefore() كما يلي:

// parentNode: العنصر الأب للعنصر الذي تريد إدراجه قبله
// newNode: العنصر الذي تريد إدراجه
// referenceNode: العنصر الذي تريد الإدراج قبله

parentNode.insertBefore(newNode, referenceNode)

لا. لا توجد خدمات خارجية مشاركة في هذا. إليك كيف يعمل الأمر:

  1. يزور المستخدم منشورًا يحتوي على مرفق PDF.
  2. يطلب متصفح المستخدم المرفق.
  3. يرسل الخادم المرفق إلى متصفح المستخدم.
  4. يقرأ متصفح المستخدم الملف باستخدام عارض PDF المدمج.

هذا كل شيء.

7 إعجابات

ممتاز - شكرًا لك @Johani. تأكيد أنه يعمل على Chrome و FF و Safari. :+1:

3 إعجابات

هذا رائع! شكراً جزيلاً لك. لقد قمت بتثبيته ويعمل! هذا بالضبط ما كنت أبحث عنه.

5 إعجابات

هل سيكون هذا بأثر رجعي على ملفات PDF التي تم نشرها بالفعل في المنتدى؟

إعجابَين (2)

لقد اختبرت للتو على موقعي التجريبي، ويبدو أنه يعمل مع المواقع الحالية أيضًا، دون الحاجة إلى ‘إعادة بناء HTML’. :+1:

6 إعجابات

لقد رأيت تحديثًا في المصدر الأسبوع الماضي، لذا أفترض أن هذه المكونات تعمل. لكن للأسف لم تعمل معي أبدًا على أي متصفح. هل هذا بسبب إعدادات الوسائط الآمنة ربما؟ هل أنا الوحيد الذي لا يستطيع تشغيل هذا أم أن هذه مشكلة شائعة؟

إعجابَين (2)

لم تعمل معي أبداً أيضاً.

إعجابَين (2)

تعمل المكونة بشكل جيد. ما هي المشكلة/الخطأ الذي تراه؟

3 إعجابات

لم أر سوى رابط تنزيل عادي لملف. لم أبدأ في التعمق أكثر لأنه لم يكن مهمًا بالنسبة لي، كان سيكون لطيفًا الحصول عليه، لا شيء آخر. لذا، آسف ولكن لا يمكنني توضيح هذا الأمر أكثر.

تعديل

حسنًا، لقد تحققت مرة أخرى - كانت آخر مرة منذ بعض الوقت.

يعرض DiscourseHub هذا (iPad)، ولا توجد أخطاء في سجلات Discourse:

ولكن عندما حاولت استخدام سفاري، عرضت الصفحة الأولى فقط، وليس الثانية.

إعجاب واحد (1)